'Unable to lazy load images with JavaScript

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));
javascripthtml


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 itsmehemant7

Related Questions