Wednesday, November 27, 2024
Today's updates - Tue Nov 26
November 27, 2024 | | In partnership with |  |
| | New coding puzzle to train your brain✨ | | | Featured content | | Infinite scroll: Loading more and more content as the user scrolls down to the end. | | No need for pagination + increases time spent on the site | With simple JavaScript we can recreate this easily: | | <div id="load-trigger-wrapper"> <!-- Grid of images> <div id="image-container"></div> <!-- Intersection Observer observes this --> < <div id="load-trigger"></div> </div> <!-- Number of loading images --> <div id="bottom-panel"> Images: <b><span id="image-count"></span> </b>/ <b><span id="image-total"></span></b> </div>
| Now it's time to detect scrolling to the end with the Intersection Observer API: | const loadTrigger = document.getElementById('load-trigger'); // ... const observer = detectScroll(); // ... // Detect when function detectScroll() { const observer = new IntersectionObserver( // Callback also runs after observe() (entries) => { for (const entry of entries) { // ... loadMoreImages(); // ... } }, // Set "rootMargin" because of #bottom-panel height // 30px upwards from the bottom { rootMargin: '-30px' } ); // Start watching #load-trigger div observer.observe(loadTrigger); return observer; }
| Now let's show the initial skeleton images: | const imageClass = 'image'; const skeletonImageClass = 'skeleton-image'; // ... // This function would make requests to an image server function loadMoreImages() { const newImageElements = []; // ... for (let i = 0; i < amountToLoad; i++) { const image = document.createElement('div'); // 👇 Display each image with skeleton-image class image.classList.add(imageClass, skeletonImageClass); // Include image in container imageContainer.appendChild(image); // Store in temp array to update with actual image when loaded newImageElements.push(image); } // ... }
| | Gemini asked someone to die 😳 | Did you see this? | | Do you think it's real… like what are the odds right? 🤔 | Learn AI in 5 Minutes a Day | | AI Tool Report is one of the fastest-growing and most respected newsletters in the world, with over 550,000 readers from companies like OpenAI, Nvidia, Meta, Microsoft, and more. | Our research team spends hundreds of hours a week summarizing the latest news, and finding you the best opportunities to save time and earn more using AI. | Sign up with 1-Click | Thanks for taking the time to read today's issue. | Best,
The Coding Beauty team |
| | | Update your email preferences or unsubscribe here © 2024 Beneebo LLC 1603 Capitol Avenue, Suite 413A, #3255
Cheyenne, Wyoming 82001, United States of America | | | Terms of Service |
|
|
|
|
|
0 Komentar untuk "Incredible infinite scroll with JavaScript"