Unable to lazy load images with JavaScript

Question

I am unable to get my images to lazy load with JavaScript. For some reason, the images just do not show up at all when I change the html from src to data-src. Then when I use an intersectionObserver to lazy load images, I can't get any images to show up on the page. Attached is my html, css and JS code;

html:
<div class="photo__container photo__container--one">
        <img
          data-src="portrait/1-vertical.jpeg"
          alt=""
          class="fade-in-img img-vertical-lazy"
        />
        <img
          data-src="portrait/2-vertical.jpeg"
          alt=""
          class="fade-in-img img-vertical-lazy"
        />
        <img
          data-src="portrait/3-vertical.jpeg"
          alt=""
          class="fade-in-img img-vertical-lazy"
        />
      </div>

CSS:
.img-vertical-lazy {
  height: 70rem;
  width: auto;
}

JS:
const lazyImages = document.querySelectorAll('.img-vertical-lazy');


const appearLazy = {
  threshold: 0.1
};
const lazyLoading = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
      if (!entry.isIntersecting) return;
          entry.target.src = entry.target.getAttribute('data-src');
          lazyLoading.unobserve(entry.target);
  });
}, appearLazy);

lazyImages.forEach(image => lazyLoading.observe(image));

You can use the native loading=lazy on the images instead of all the JavaScript and the intersection observer :] — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Feb 17, 2022 at 22:23
@BenjaminGruenbaum loading=lazy only has support on 74% of clients currently: caniuse.com/loading-lazy-attr — Skylar
– Skylar, Commented Feb 17, 2022 at 22:26
I can't ever get this feature to work for me. Everytime I add this to the image and check the network for when it loads, it always loads instantly. This is why I am using an intersection observer @Ben — Austin
– Austin, Commented Feb 17, 2022 at 22:30
Your code works for me. The src is correct? jsfiddle.net/8bxd5spn — azeós
– azeós, Commented Feb 17, 2022 at 22:34
Yes. If I change the html to just src then the images will appear. But when I make the images a data-src they disappear and don't show up even though the entire section containing the images is in the viewport. @azeós — Austin
– Austin, Commented Feb 17, 2022 at 22:37

itsmehemant7 · Accepted Answer · 2022-02-17 23:23:28Z

There are several ways to do that but it depends on your purpose of using lazy loading. In most cases, it is for SEO (i.e. for fast page loading). If you are lazy loading images only for a fast page speed score then you can add this code to your page.

Here is a working example:

An image will be loaded when you scroll inside div.

 <html>
<body>

<div id="mydiv" style="width:500px;height:300px;overflow:scroll;">
<h1>Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced</h1>
     <div class="photo">
        <img data-src="https://images.freeimages.com/images/small-previews/648/bs-04-1255720.jpg"/>
      </div>
<h2>Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.</h2>

</div>

<script>
  var sw = 0;
document.getElementById('mydiv').onscroll=function(){
  if(sw==0){
      sw=1;
  const lazyImages = document.querySelectorAll('img');
  for (let i = 0; i < lazyImages.length; i++) {
         lazyImages[i].src = lazyImages[i].getAttribute('data-src');
   }
  }

}
</script>
</body>
</html>

Tip: use window.onscroll to apply effect on whole webpage

Collectives™ on Stack Overflow

Unable to lazy load images with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related