js 图片懒加载
Created by Marydon on 2018-04-14 08:15
1.使用场景
当网页上有大量图片需要加载时,如果一次性将图片全部加载完,网页加载时间会过长;
网页本身已经反应很慢了,如果你的页面上又需要引用图片,这时候同样是雪上加霜。
2.图片懒加载原理
图片懒加载,只不过是叫法比较高大上而已,其实现方式很简单,就是在需要的时候再给图片的src属性赋值,仅此而已。
3.代码实现
/** * 图片懒加载 */ function ImgLazyLoad() { /** * 滚动到图片所在位置再加载 * @param imgId * 懒加载图片的ID * @param imgSrc * 懒加载图片的地址 * @param distance * 图片的可视距离(这个参数可以不传) */ this.scrollLoad = function(imgId,imgSrc,distance) { // 获取该图片的src var img_source = $('#' + imgId).attr('src'); // 只执行一次 if("" == img_source) { // 不滚动的情况下,网页的可见高度 var documentClientHeight = document.documentElement.clientHeight || window.innerHeight; // 获取该图片距离网页顶部的距离 var imgOffsetTop = $('#' + imgId)[0].offsetTop; // 获取网页的可见高度 // var bodyClientHeight = document.body.clientHeight;<span style="color: #008000;">//</span><span style="color: #008000;"> 1.网页高度<小于网页可视区域的高度(imgOffsetTop < documentClientHeight),就不会发生滚动事件</span> <span style="color: #0000ff;">if</span> (imgOffsetTop <<span style="color: #000000;"> documentClientHeight) { $(</span>'#' + imgId)[0].src =<span style="color: #000000;"> imgSrc; </span><span style="color: #0000ff;">return</span><span style="color: #000000;">; } </span><span style="color: #008000;">//</span><span style="color: #008000;"> 获取屏幕高度</span> <span style="color: #008000;">//</span><span style="color: #008000;">var screenHeight = window.screen.height;</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 图片距离网页左上角的纵向偏移距离(距离网页顶部的距离)</span> <span style="color: #0000ff;">var</span> max_imgClientTop = $('#' + imgId)[0<span style="color: #000000;">].getBoundingClientRect().top; </span><span style="color: #008000;">//</span><span style="color: #008000;"> ie下带有小数,所以只取整数</span> max_imgClientTop =<span style="color: #000000;"> parseInt(max_imgClientTop); </span><span style="color: #008000;">//</span><span style="color: #008000;"> 图片可视距离(还差多少可以被看见)</span> <span style="color: #0000ff;">var</span> max_imgClientDistance = max_imgClientTop -<span style="color: #000000;"> documentClientHeight; </span><span style="color: #008000;">//</span><span style="color: #008000;">0<= distance <=max_imgClientDistance</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 1.参数不存在时,设值=0;(图片刚从可视区域最底部出现时,距离达到最小)distance→→Min=0</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 2.参数>网页可见高度时,设值=可视区域高度;(不滚动时,距离达到最大)distance→→Max=max_imgClientDistance,scrollTop=0</span> distance = ((distance || 0)>max_imgClientDistance)?<span style="color: #000000;">max_imgClientDistance:distance; </span><span style="color: #008000;">//</span><span style="color: #008000;"> 2.最大距离时,无滚动</span> <span style="color: #0000ff;">if</span> (distance ==<span style="color: #000000;"> max_imgClientDistance) { $(</span>'#' + imgId)[0].src =<span style="color: #000000;"> imgSrc; </span><span style="color: #0000ff;">return</span><span style="color: #000000;">; } </span><span style="color: #008000;">//</span><span style="color: #008000;"> 页面绑定滚动事件 </span> $(document).scroll(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ </span><span style="color: #008000;">//</span><span style="color: #008000;"> 获取网页被卷高度</span> <span style="color: #008000;">//</span><span style="color: #008000;"> var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 距离网页最顶部的距离</span> <span style="color: #0000ff;">var</span> imgClientTop = $('#' + imgId)[0<span style="color: #000000;">].getBoundingClientRect().top; </span><span style="color: #008000;">//</span><span style="color: #008000;"> 图片的可视高度</span> <span style="color: #0000ff;">var</span> clientHeight = documentClientHeight -<span style="color: #000000;"> imgClientTop; </span><span style="color: #008000;">//</span><span style="color: #008000;"> 到达指定距离差或者图片已经进入视野范围</span> <span style="color: #0000ff;">if</span> (-clientHeight <= distance || documentClientHeight >=<span style="color: #000000;"> imgClientTop) { $(</span>'#' + imgId)[0].src =<span style="color: #000000;"> imgSrc; } }); } }; </span><span style="color: #008000;">/*</span><span style="color: #008000;">* * 通过单击别的元素时再加载 * @param clickId * 被绑定单击事件的页面元素ID * @param imgId * * @param imgSrc * 懒加载图片的地址 </span><span style="color: #008000;">*/</span> <span style="color: #008000;">//</span> <span style="color: #0000ff;">this</span>.clickLoad = <span style="color: #0000ff;">function</span><span style="color: #000000;">(clickId,imgId,imgSrc) { </span><span style="color: #008000;">//</span><span style="color: #008000;"> 获取该图片的src</span> <span style="color: #0000ff;">var</span> img_source = $('#' + imgId).attr('src'<span style="color: #000000;">); </span><span style="color: #008000;">//</span><span style="color: #008000;"> 只执行一次</span> <span style="color: #0000ff;">if</span>("" ==<span style="color: #000000;"> img_source) { </span><span style="color: #008000;">//</span><span style="color: #008000;"> 绑定单击事件</span> $('#' + clickId).click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ $(</span>'#' + imgId)[0].src =<span style="color: #000000;"> imgSrc; }); } };
};
调用:
$(function() { // 实例化对象 var ill = new ImgLazyLoad(); // 调用 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
关于最后一个的解释,请看下面的推荐文章