前言
- 一般来说,影响一个网站加载时间的最大因素就是图片资源过多。一般的网页大小只有几十 k,而图片资源往往可能达到几 M。
- 有关于图片加载机制的可以看 Web图片资源的加载与渲染时机。所以对于图片很多的页面,为了加速页面加载速度,我们一般需要对图片资源进行懒加载
- 懒加载:顾名思义就是延迟加载的意思。当图片在窗口不可见的范围内不加载,滚动到可视区域之后再进行加载。
原理
img 标签在没有 src 属性时是不会加载图片资源的(注:src属性只有存在就会向服务器发送请求),这里我们还需要用到data-src这个属性来存储图片地址。当图片滚动到可视区域时,将data-src的值赋给src。当然,常用做法也可能用一张默认的图来进行占位
实现
<html>
<head>
<title>懒加载</title>
<style>
img {
display: block;
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<img
src="default.jpg"
data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_03a01c0a88689b4ae15d2456fb74fffd.jpg"
alt=""
/>
<img
src="default.jpg"
data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_03a01c0a88689b4ae15d2456fb74fffd.jpg"
alt=""
/>
<img
src="default.jpg"
data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_190e75a5997b2e58925b38eea9bb31b1.jpg"
alt=""
/>
<img
src="default.jpg"
data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_27822ff96364f7e8bbfb590f6f3e2b50.jpg"
alt=""
/>
<img
src="default.jpg"
data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_2bec01f2f3765308a36335de271cdd24.jpg"
alt=""
/>
<img
src="default.jpg"
data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_31f097ecfa0a22d1d955637418bdf49d.jpg"
alt=""
/>
<img
src="default.jpg"
data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_33487cd406078f3c99391db03da71f64.jpg"
alt=""
/>
<img
src="default.jpg"
data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_35a5d6d62c9c4c941f1d79ec36829042.jpg"
alt=""
/>
<img
src="default.jpg"
data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_5047eb73f50b0020bf88f2463e086125.jpg"
alt=""
/>
</body>
</html>
代码部分来源于实现图片懒加载(Lazyload)
var imgsCount = document.getElementsByTagName("img").length;
var imgs = document.getElementsByTagName("img");
var count = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll = lazyload;
function lazyload() {
//监听页面滚动事件
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
for (var i = count; i < imgsCount; i++) {
if (imgs[i].offsetTop < seeHeight + scrollTop) {
if (imgs[i].getAttribute("src") == "default.jpg") {
imgs[i].src = imgs[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
节流优化
从上面代码来看,lazyload函数是绑定在window.onscroll上的。当页面滚动时,lazyload会不断的调用,会非常影响浏览器性能。所以我们需要对lazyload函数做节流(throttle)
这是underscore 节流函数实现
function throttle(func, wait, options) {
var context, args, result;
var timeout = null;
var previous = 0;
if (!options) options = {};
var later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
}
结合节流函数
window.addEventListener("scroll", throttle(lazyload, 500));