js 图片懒加载

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.网页高度&lt;小于网页可视区域的高度(imgOffsetTop &lt; documentClientHeight)，就不会发生滚动事件</span>
        <span style="color: #0000ff;">if</span> (imgOffsetTop &lt;<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&lt;= distance &lt;=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.参数&gt;网页可见高度时，设值=可视区域高度;(不滚动时，距离达到最大)distance→→Max=max_imgClientDistance,scrollTop=0</span>
        distance = ((distance || 0)&gt;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 &lt;= distance || documentClientHeight &gt;=<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

　　关于最后一个的解释，请看下面的推荐文章　　 

 相关推荐：

• js 判断进入可视区域