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