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图片懒加载的资料请关注毛票票其它相关文章!