图片预加载和懒加载

Posted 2020-09-20

1.什么是预加载？

提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2：什么是懒加载？

延迟加载图片，当用户需要的时候再去加载图片

当我们访问一些类似电商网站，遇到图片很多情况下，需要浏览器去下载这些图片，遇到网速比较慢的时候，用户等待的时间特别长，造成很不好的用户体验。这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户。

图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好，所以将两个结合起来放到web程序中是一种不错的选择。

---

 

预加载

Image 对象在客户端预先加载图像。可以像使用<img>元素一样使用Image 对象，只不过无法将其添加到DOM 树中。

function preloadImg(url) {
　　var img = new Image();
　　img.src = url;
　　if(img.complete) {//如果图片已经存在于浏览器缓存，接下来可以使用图片了

　　//do something here
　　} else {
　　　　img.onload = function() {//无论浏览器是否存在图片缓存,重新请求图片地址,都会触发onload事件

　　　　//接下来可以使用图片了
　　　　//do something here
　　　　};
　　}
}

懒加载：

实现原理：将图片src赋值为一张默认图片，当用户滚动滚动条到可视区域图片时候，再去加载真正的图片。

var num = document.getElementsByTagName(‘img‘).length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

lazyload(); //页面载入完毕加载可是区域内的图片

window.onscroll = lazyload;//滚动滚动条依次触发

function lazyload() { //监听页面滚动事件
　　var seeHeight = document.documentElement.clientHeight; //可见区域高度
　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
　　// console.log(seeHeight);
　　//console.log(scrollTop);
　　for (var i = n; i < num; i++) {
　　　　if (img[i].offsetTop < seeHeight + scrollTop) {
　　　　　　if (img[i].getAttribute("src") == "default.jpg") {
　　　　　　　　img[i].src = img[i].getAttribute("setsrc");
　　　　　　}
　　　　　　　　n = i + 1;
　　　　}
　　}
}