前端性能优化之图片懒加载

图片延迟加载

前言

图片延迟加载是性能优化方案之一。 当页面显示大量图片或者一长串图片，即出现滚动条时，页面加载会一次性加载所有图片，包括不在可见区域的图片，即据说需要滑动滚动条，下滑时看到的图片也会被加载。 这样的话，同时加载就会很慢，而且加载速度会很慢，尤其是网速不好的时候，而且很浪费用户流量，比如用户点击进来只需要看第一个屏幕上的图片，但它加载了整个页面的图片，这是不必要的。 您可以使用图片延迟加载来减少请求，节省带宽，提高性能和用户体验。

什么是图片延迟加载

图片延迟加载简单来说就是当图片即将进入用户可见区域时才加载图片。

图片懒加载方案

模拟场景：首先准备一张图片，通过-top将其定位到第一屏不可见区域，如-top:150vh。 并赋予自定义属性lazy-src图像的URL，当图像进入可视化区域时，为图像添加src属性，值为lazy-src的属性值。

<img lazy-src="https://img01.sogoucdn.com/app/a/100520021/ae21a29cb0aa339846f873a7ff5aa0a4" class="img-item">

1.使用t

const clientHeight = window.innerHeight
const oimg = document.querySelector('.img-item')
window.onscroll = function () {
						const imgTop = oimg.getBoundingClientRect().top
                		if (imgTop < window.innerHeight) {
                    		const url = oimg.getAttribute('lazy-src')
                    		oimg.setAttribute('src', url)
                		}
           			 }

2. 使用

const oimg = document.querySelector('.img-item')
const observer = new IntersectionObserver((entries, observer) => {
				//entries 代表被监视图片元素组成的数组
                const entrie = entries[0]  
                //entrie.isIntersecting 表示图片元素是否进入可视区域
                if (entrie.isIntersecting) {
                    const url = oimg.getAttribute('lazy-src')
                    oimg.setAttribute('src', url)
                    observer.unobserve(oimg) //当图片被加载，我们应该取消监视图片元素
                }
            })
observer.observe(oimg) //监视图片元素

3.在vue中使用vue-