Puzzle of the day

New coding puzzle to train your brain✨

Solve puzzle

Featured content

Incredible infinite scroll with JavaScript

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.

Thanks for taking the time to read today's issue.

Best,
The Coding Beauty team

Update your email preferences or unsubscribe here

1603 Capitol Avenue, Suite 413A, #3255
Cheyenne, Wyoming 82001, United States of America

.

Incredible infinite scroll with JavaScript

Puzzle of the day

Featured content

Incredible infinite scroll with JavaScript

Gemini asked someone to die 😳

Learn AI in 5 Minutes a Day

Share :

Previous

Next

Related Post:

0 Komentar untuk "Incredible infinite scroll with JavaScript"