前端优化很经常的对图片的优化,当一个页面图片很多时初始化该页面同时 请求大量的图片资源导致性能低下
因此图片的懒加载被用来使用,
懒加载是指在满足条件的情况下才请求图片,可以逐步的请求避免大量的图片同时请求的情况
懒加载的思想是在浏览器可视区域时才加载图片
1.初始化时图片src属性置空
2.将src地址存储在自定义属性当中
3.当图片进入视野范围时将存储的值赋值到src中
简易代码如下:
;(function () {
HTMLElement.prototype.getElementTop = function() { //获取元素距离文档顶部的距离
var top = this.offsetTop,
cur = this.offsetParent;
while (cur !== null){
top += cur.offsetTop;
cur = cur.offsetParent;
}
return top;
};
var img_top = [], //当前页面图片元素距离文档顶部值的集合
img_height = [], //当前页面图片元素本身高度的集合
layer_element = []; //当前有懒加载标志元素集合
element = document.getElementsByTagName("img"),
view_height = document.documentElement.clientHeight;
for (var i = 0;i < element.length;i++){
if (element[i].getAttribute("data-src")){ //将有懒加载标志的元素挑出来
layer_element.push(element[i]);
img_top.push(element[i].getElementTop());
img_height.push(element[i].offsetHeight);
}
}
document.addEventListener("scroll",function () { //滚动事件监听当前在视野范围的图片赋值src属性
var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0;i < layer_element.length;i++) {
if (!(scroll_top >= img_top[i] + img_height[i]) && !(scroll_top - 80 < img_top[i] - view_height)) {
layer_element[i].src = layer_element[i].getAttribute("data-src");
}
}
},false);
})();
使用时需要在<img></img>标签中附件“data-src”自定义属性,其值为该图片的src值即可使用