图片的预加载和懒加载

图片的预加载和懒加载

图片预加载

提前加载图片，当用户需要查看时就可直接从本地缓存中读取，就不用再去请求服务器了

作用：

能使用户的操作得到最快的反映，提升了用户体验。但是增加了服务器压力，首页加载时间变长

图片预加载的方法

这里介绍两个常用且实用的方法 。每个方法都有优缺点 。 也有自己使用的场景。我们应该根据实际选择合适的方法

1. CSS实现：

隐藏在 background 的 url 属性里面，并且将图片移到看不见的地方，或缩小到看不见

当使用到已经预加载好的图片时，会直接使用缓存好的图片资源，而不需要向服务器发送请求。

缺点：图片跟随文档一同加载，图片较多的时候会导致加载缓慢。

// 使用 background 属性加载图片，但是并不显示出来
 
// 分开写法：
.preImg {
   
    background-image: url('http://domain.tld/image-01.png');
    width: 0;
    height: 0;
}

// 复合写法：
.preloadImg {
    	
	background: url('http://domain.tld/image-01.png') no-repeat -9999px -9999px; 
} 

2. 通过 JS 中的 Image 对象

• 将需要预加载的图片资源的 URL 保存在数组里
• 循环遍历 URL 数组，通过new Image()创建 img 对象
• 将 img 对象的 src 属性的值指定为预加载图片的 URL

let imgs = [
	'./imgsrc1',
	'./imgsrc2',
	'./imgsrc3',
];

const preloadImg(imgUrls) {
   
	imgUrls.forEach(imgUrl => {
   
        // 生成图片对象
		const img = new Image()
		img.src = imgUrl
	})
}
preloadImg(imgs)

图片懒加载

在需要的时候才加载图片，延迟加载甚至不加载图片。

作用： 延迟请求或减少请求数，减轻了服务器压力，页面加载速度更快。

缺点：图片是显示时才去加载。如果网络不太好可能会有一段时间是空白

图片懒加载的方法

原理：

利用自定义属性将图片的 URL 存放到图片标签身上 ， 图片的 src 为空或者用其他较小的图片资源代替（提示加载中）

图片的懒加载主要是监听 body 或者其他存放图片且滚动的元素的 scroll 事件.

在每一次事件触发时，通过相关的 API 和属性，检查图片是否显示 。

如果显示就将 URL 填到 src 属性中 ，加载图片 。如果没有显示则不进行操作。

如何检测图片是否显示

v.offsetTop < clientHeight + scrollTop && v.offsetTop + v.offsetHeight > scrollTop

对于理解懒加载的原理其实不难 。 懒加载的关键点也是重难点就在于如何检测图片是否处理可视区内。

• innerHeight : 可视区高度

  可视区高度可使用 window.innerHeight 获得 。但这个属性 IE9 以下并不支持。 因此兼容性写法为：

let clientWidth=window.innerWidth|| document.documentElement.clientHeight|| document.body.clientHeight;

关于此兼容

• offsetTop

  子图片相对父元素的偏移量。let offsetTop = imgNode.offsetTop

• scrollTop

  滚动元素顶部被滚出显示区的高度。 let scrollTop = scrollNode.scrollTop

**注意 ，这个元素必须是有滚动条才可以，否则是 0 **

如果滚动区域是整个页面，也就是仅 HTML 出现了滚动条 ，其他不设置滚动条 。

那么通过 document.documentElement.scrollTop 来获取 scroll