优化性能之图片的懒加载 (封成插件,可直接使用)
//懒加载插件
function imgload(){
var img=document.getElementsByTagName("img");
//所有图片加载;
function loas(){
for(var i=0;i<img.length;i++){
if(img[i].lasd==true){
continue;
}
lazyimg(img[i])
}
}
//让其拥有延迟的感觉
setTimeout(function(){
loas();
},1000)
//必不可少的滚动条事件
window.onscroll=function(){
loas();
}
// 单张图片的加载
function lazyimg(ele){
var swidth=document.documentElement.scrollTop+document.documentElement.clientHeight;
var ding=offset(ele).boto+ele.offsetHeight; //测试时加上ele.offsetHeight,查看问题,实际操作中不需要;
if(swidth>ding){
if(ele.lasd==true){
return;
}
var img=new Image;
img.src=ele.getAttribute("xsrc");
img.onload=function(){
ele.src=img.src;
}
ele.lasd=true;
}
}
// 元素相对body的定位
function offset(ele){
var le=ele.offsetLeft;
var to=ele.offsetTop;
var parent=ele.offsetParent;
while(parent){
le+=parent.offsetLeft;
to+=parent.offsetTop;
parent=parent.offsetParent
}
return {bole:le,boto:to};
}
}
imgload();