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, #3255Cheyenne, Wyoming 82001, United States of America
 |  |  |  | Terms of Service | 
 | 
 | 
 | 
 | 
 | 
 
 
0 Komentar untuk "Incredible infinite scroll with JavaScript"