The principle and implementation of lazy image loading

Why use lazy image loading ？ What is image lazy loading ？

1. principle

Image lazy loading is a way of front-end page optimization , When there are a lot of pictures on the page , Image loading takes a lot of time , Very expensive server performance , It not only affects the rendering speed, but also wastes bandwidth , To solve this problem , Improve user experience , So there is lazy loading to reduce the pressure on the server , Load the content of the visual area first , Other parts are loaded after entering the visual area , To improve performance .

2. Realization

Ideas ： When the picture doesn't enter the visual area , Not at first src assignment , So the browser won't send the request , Wait until the picture enters the visual area src assignment . The real address of the picture needs to be stored in data-src in .

The picture doesn't enter the visual area , That is to say, the picture offsetTop The visual height of the page is less than needed , But think about it , When the picture is at the bottom of the page , You need to scroll the page for a distance before you can see the picture , So here we need to meet img.scrollTop < The height of the visible area of the page + The height of the page scrolling , Here is the key to the lazy loading of images , Next, let's look at the implementation of the specific code

• HTML

<img src="loading.gif" data-src="1.jpg" alt="">
<img src="loading.gif" data-src="2.jpg" alt="">
<img src="loading.gif" data-src="3.jpg" alt="">
<img src="loading.gif" data-src="4.jpg" alt="">
<img src="loading.gif" data-src="5.jpg" alt="">
<img src="loading.gif" data-src="6.jpg" alt="">
<img src="loading.gif" data-src="7.jpg" alt="">
<img src="loading.gif" data-src="8.jpg" alt="">
<img src="loading.gif" data-src="9.jpg" alt="">
<img src="loading.gif" data-src="10.jpg" alt="">
......

• CSS

*{
    
	margin: 0;
	padding: 0;
}
img{
    
	vertical-align: top;
	width: 100%;
	height: auto;
}

• JS

let img = document.getElementsByTagName('img');
let n = 0; // Store where pictures are loaded , Avoid traversing from the first picture every time 
lazyload(); 
window.addEventListener('scroll',lazyload);
function lazyload(){
      // Monitor page scrolling Events 
	var seeHeight = window.innerHeight;  // Height of visible area 
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	for(let i = n; i < img.length; i++){
    
		if(img[i].offsetTop < seeHeight + scrollTop){
    
			if(img[i].getAttribute("src") == 'loading.gif'){
    
				img[i].src = img[i].getAttribute("data-src");
			}
			n = i + 1;
		}
	}
}

Image lazy loading can also be used in combination with throttling and anti shake functions , Optimize the page . Next time, let's introduce how to realize throttling and anti shake ！