笔记：关于页面图片的懒加载三种方法

如果用户还没看到网页下面的内容，没有必要这么快加载这些看不到的图片，实现只有滚动到网页下面才能预览，看不到图片

---

方法一

事件监听，监听scroll事件，鼠标滚动就触发

需要知道：

窗口显示区的高度：window.innerHeight、

图片到视图上边的距离（高度)：getBoundingClientRect().top

如果图片还未能看到，即图片距离距离视图顶部的距离大于窗口显示区的高度

如果图片可以看到，即图片距离距离视图顶部的距离小于窗口显示区的高度

<img data-src="1.jpg">
<img data-src="2.jpg">
<img data-src="3.jpg">

const images = document.querySelectorAll('img')
window.addEventListener('scroll',(e)=>{
 images.forEach(image=>{
     const imageTop = image.getBoundingClientRect().top
     if(imageTop < window.innerHeight){
         const data_src = image.getAttribute("data-src")
            image.setAttribute('src',data_src)
     }
     //缺点：
     //如果图片较多，scroll会触发太多次
     //页面需要加载很多内容就会导致任务的堆积
     //而且即使图片已经加载了还是会不断触发事件，非常消耗资源
     console.log('scroll触发')
 })
})

自定义属性：data-*

浏览器碰到这个属性的时候是不会像默认属性那样进行属性处理的

eg.

这样就相当于不知道要在哪里下载这些图片了

自定义属性赋值给原本src属性

var image = document.querySelectorAll('img')[0]
var data_src = image.getAttribute("data-src")
image.setAttribute('src',data_src)

方法二

intersectionObserver（交叉观察）

目标元素和可视窗口会产生交叉区域，交叉区域发生什么事情，执行什么程序

intersectionObserve是浏览器提供的构造函数，可以直接拿来使用，需要浏览器兼容性

cosnt observer = new IntersectionObserver(callback) //参数是一个回调函数
/*
    回调函数一般触发两次：
        目标元素看见了触发一次；
        目标元素看不见了又触发一次；
        回调函数会接收一个参数（数组）
            isIntersecting:(是否交叉)判断该次触发回调函数时是否已经观察到了图片
            图片未滚动到可视区域：false,滚动到：true
*/
/*
    图片加载后取消回调函数的触发，即直接取消observer实例这个观察动作
*/
observer.observe(DOM节点)     //开始
observer.unobserver(DOM节点)  //取消的动作（方法）
/*
    优点：
    不用进行不断观察，因为图片已经被加载出来，一般就没必要观察了
*/

const images = document.querySelectorAll('img')
const callback = entries =>{
    entries.forEach(entry =>{
        if(entey.isIntersecting){
            //target属性指的是目标元素-->判断回调函数是属于哪个元素
            const image = entry.target
            const data_src = image.getAttribute('data-src');
            image.setAttribute('src',data_src);
            observer.unobserve(image);
            console.log('触发')
        }
    })    
}
const observer = new IntersectionObserver(callback);
images.forEach(image=>{
    observer.observe(image)
})

方法三：

	// 图片懒加载


	const images = document.querySelectorAll("img");


	const callback = entries => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				const image = entry.target;
				const data_src = image.getAttribute("data-src");
				image.setAttribute("src", data_src);
				observer.unobserve(image);
				console.log("触发");
			};
		});
	};


	const observer = new IntersectionObserver(callback);


	images.forEach(image => {
		observer.observe(image);
	});