js 图片懒加载的实现
1.使用场景
当网页上有大量图片需要加载时，如果一次性将图片全部加载完，网页加载时间会过长；
网页本身已经反应很慢了，如果你的页面上又需要引用图片，这时候同样是雪上加霜。
2.图片懒加载原理
图片懒加载，只不过是叫法比较高大上而已，其实现方式很简单，就是在需要的时候再给图片的src属性赋值，仅此而已。
3.代码实现
/**
*图片懒加载
*/
functionImgLazyLoad(){
/**
*滚动到图片所在位置再加载
*@paramimgId
*懒加载图片的ID
*@paramimgSrc
*懒加载图片的地址
*@paramdistance
*图片的可视距离（这个参数可以不传）
*/
this.scrollLoad=function(imgId,imgSrc,distance){
//获取该图片的src
varimg_source=$('#'+imgId).attr('src');
//只执行一次
if(""==img_source){
//不滚动的情况下，网页的可见高度
vardocumentClientHeight=document.documentElement.clientHeight||window.innerHeight;
//获取该图片距离网页顶部的距离
varimgOffsetTop=$('#'+imgId)[0].offsetTop;
//获取网页的可见高度
//varbodyClientHeight=document.body.clientHeight;
//1.网页高度<小于网页可视区域的高度(imgOffsetTop网页可见高度时，设值=可视区域高度;(不滚动时，距离达到最大)distance→→Max=max_imgClientDistance,scrollTop=0
distance=((distance||0)>max_imgClientDistance)?max_imgClientDistance:distance;
//2.最大距离时，无滚动
if(distance==max_imgClientDistance){
$('#'+imgId)[0].src=imgSrc;
return;
}
//页面绑定滚动事件
$(document).scroll(function(){
//获取网页被卷高度
//varscrollTop=document.body.scrollTop||document.documentElement.scrollTop;
//距离网页最顶部的距离
varimgClientTop=$('#'+imgId)[0].getBoundingClientRect().top;
//图片的可视高度
varclientHeight=documentClientHeight-imgClientTop;
//到达指定距离差或者图片已经进入视野范围
if(-clientHeight<=distance||documentClientHeight>=imgClientTop){
$('#'+imgId)[0].src=imgSrc;
}
});
}
};
/**
*通过单击别的元素时再加载
*@paramclickId
*被绑定单击事件的页面元素ID
*@paramimgId
*
*@paramimgSrc
*懒加载图片的地址
*/
//
this.clickLoad=function(clickId,imgId,imgSrc){
//获取该图片的src
varimg_source=$('#'+imgId).attr('src');
//只执行一次
if(""==img_source){
//绑定单击事件
$('#'+clickId).click(function(){
$('#'+imgId)[0].src=imgSrc;
});
}
};
};
调用：
$(function(){
//实例化对象
varill=newImgLazyLoad();
//调用
ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20170307/ws_products.bmp',404);
});
4.涉及知识点
网上也有很多实现方法，但是不能自定义设置加载图片的时机，为了实现这一点，花了不少功夫才搞好。
代码很短，但是涉及的知识点很多。
//获取的是网页的可视区域的高度（不滚动的情况下）
document.documentElement.clientHeight||window.innerHeight
//获取的是网页的可见高度（除去隐藏元素的高度）
document.body.clientHeight
//获取的是显示屏的高度
window.screen.height
//获取网页的被卷高度（ie下不支持前者获取方式）
document.body.scrollTop||document.documentElement.scrollTop
//获取指定元素距离网页顶部的距离（静态死值）
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top
以上就是js图片懒加载的实现的详细内容，更多关于js图片懒加载的资料请关注毛票票其它相关文章！