滚动到网页某位置加载图片

滚动到网页某位置加载图片

首先要给图片标签写一个自定义属性data-src

然后封装一个图片显示的函数

			function showimg(){
				let imgsrc=img.getAttribute("data-src");
				let newimg=new Image;
				newimg.src=imgsrc;
				newimg.onload=function(){
					img.src=imgsrc;
					img.removeAttribute("data-src");
					newimg=null;
					img.isload=true;//图片已经加载了
				}
			}

获取图片最底部到网页顶部的距离

//box的高度
let box_height=box.offsetTop+box.offsetHeight;

网页滚动的被卷入的高度加上可视窗口的高度

scroll_height=html.scrollTop+html.clientHeight;

当网页滚动的被卷入的高度加上可视窗口的高度的时候,才显示出图片

				if(scroll_height>box_height){
					if(img.isload){return;}//如果我的图片已经加载出来了，我就不加载了
					showimg();
				}

除此方法之外,还可以调用getBoundingClientRect方法,更容易实现

• 首先我们先看一下getBoundingClientRect方法是什么(如图所示):
  

假设红色盒子是box,那么: box..getBoundingClientRect().top就相当于是box的offsetTop,box..getBoundingClientRect().bottom就相当于是box的offsetTop加上自身的offsetWidth, 同理: right也是如此, 由此可以用此方法更简洁实现图片懒加载.

原文：https://www.cnblogs.com/asas001/p/14987503.html