Briefly describe the lazy loading principle of pictures

Principle of lazy loading

An image is an <img> tag. Whether the browser initiates a request for an image is based on the src attribute of <img>, so the key to lazy loading is to not give the src of <img> when the image does not enter the visible area. Assign a value so that the browser will not send a request, and then assign a value to src after the image enters the visible area.

There are four steps to realize lazy loading, as follows:

1. Load the loading picture

2. Determine which pictures to load [Key]

3. Load pictures invisibly

4. Replace the real picture

Here are a few API functions:

The width of the visible area of ​​the page: document.body.clientWidth;

The height of the visible area of ​​the webpage: document.body.clientHeight;

The width of the visible area of ​​the webpage: document.body.offsetWidth (including the width of the sideline);

The height of the visible area of ​​the webpage: document.body.offsetHeight (including the width of the sideline);

The full text width of the page body: document.body.scrollWidth;

The full text height of the page body: document.body.scrollHeight;

The height of the page being scrolled: document.body.scrollTop;

The page is scrolled to the left: document.body.scrollLeft;

On the body of the page: window.screenTop;

The left part of the body of the page: window.screenLeft;

The height of the screen resolution: window.screen.height;

The width of the screen resolution: window.screen.width;

The height of the available work area on the screen: window.screen.availHeight;

HTMLElement.offsetTop is a read-only property, which returns the distance of the current element relative to the top of its offsetParent element.

window.innerHeight: The viewport height of the browser window (in pixels); if there is a horizontal scroll bar, the height of the scroll bar is also included

 

js code implementation

// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function(){
	// 获取图片列表，即img标签列表
	var imgs = document.querySelectorAll('img');

	// 获取到浏览器顶部的距离
	function getTop(e){
		return e.offsetTop;
	}

	// 懒加载实现
	function lazyload(imgs){
		// 可视区域高度
		var h = window.innerHeight;
		//滚动区域高度
		var s = document.documentElement.scrollTop || document.body.scrollTop;
		for(var i=0;i<imgs.length;i++){
			//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
			if ((h+s)>getTop(imgs[i])) {
				// 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
				(function(i){
					setTimeout(function(){
						// 不加立即执行函数i会等于9
						// 隐形加载图片或其他资源，
						//创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
						var temp = new Image();
						temp.src = imgs[i].getAttribute('data-src');//只会请求一次
						// onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
						temp.onload = function(){
							// 获取自定义属性data-src，用真图片替换假图片
							imgs[i].src = imgs[i].getAttribute('data-src')
						}
					},2000)
				})(i)
			}
		}
	}
	lazyload(imgs);

	// 滚屏函数
	window.onscroll =function(){
		lazyload(imgs);
	}
}

https://zhuanlan.zhihu.com/p/112675546  //