图片的预加载和懒加载
图片预加载
提前加载图片,当用户需要查看时就可直接从本地缓存中读取,就不用再去请求服务器了
作用:
能使用户的操作得到最快的反映,提升了用户体验。但是增加了服务器压力,首页加载时间变长
图片预加载的方法
这里介绍两个常用且实用的方法 。每个方法都有优缺点 。 也有自己使用的场景。我们应该根据实际选择合适的方法
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