How to load lazy image element from IntersectionObserver to HTML?

user_18703043 0
Viewed 44

I am using an IntersectionObserver to track images that are supposed to be lazily loaded into a gallery component.

html:

  <div id="gallery" class="gallery">
    <div class="gallery-card">
      <a href="#"><img src="../../images/1.jpg"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/2.jpg" class="lazy"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/3.jpg" class="lazy"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/4.jpg" class="lazy"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/5.jpg" class="lazy"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/6.jpg" class="lazy"></a>
    </div>
  </div>

js:

let config = {
    rootMargin: '0px 0px 50px 0px',
    threshold: 0
};

const observer = new IntersectionObserver(function(entries, self) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            console.log(entry.target)
            // load entry.target element in the html component
            // preloadImage(entry.target);
            self.unobserve(entry.target);
        }
    });
}, config);

const lazyImages = document.querySelectorAll('[data-src]');
lazyImages.forEach(img => {
    observer.observe(img);
});

Output upon scrolling down works as intended:

<img src="/images/ph.png?3d03f427893c28791c9e0b8a347a277d" data-src="../../images/2.jpg" class="lazy" data-v-434bdd8c="">
<img src="/images/ph.png?3d03f427893c28791c9e0b8a347a277d" data-src="../../images/3.jpg" class="lazy" data-v-434bdd8c="">
<img src="/images/ph.png?3d03f427893c28791c9e0b8a347a277d" data-src="../../images/4.jpg" class="lazy" data-v-434bdd8c="">
...

The IntersectionObserver grabs the correct elements but how do I load the images into the html?

lazy-loading html javascript
1 Answers

This seems to work just fine:

let config = {
    rootMargin: '0px 0px 50px 0px',
    threshold: 0
};

const observer = new IntersectionObserver(function(entries, self) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            const img = entry.target
            img.src = img.dataset.src
            self.unobserve(img);
        }
    });
}, config);

const lazyImages = document.querySelectorAll('[data-src]');
lazyImages.forEach(img => {
    observer.observe(img);
});
user_187030430
Related