web圖片懶加載

此前在瀏覽一些網站的時候，發現他們網站的圖片都是你「鼠標」滾到哪，圖片纔會加載顯示。當時以爲好神奇，怎麼會這麼「跟手」呢。

核心原理是：

1 設置一個定時器，計算每張圖片是否會隨着滾動條的滾動，而出如今視口（也就是瀏覽器中的展示網站的空白部分）中；

2 爲<img>標籤設置一個暫存圖片URL的自定義屬性（例如loadpic），當圖片出如今視口時，再將loadpic的值賦給圖片的src屬性；

最後，貼出分別用原生js和jQuery實現該功能的實現方法：

1 原生JavaScript的實現方法

<script>
    var imgs = document.getElementsByTagName('img');
    // 獲取視口高度與滾動條的偏移量
    function lazyload(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        for(var i=0; i<imgs.length; i++) {
            var x =scrollTop+viewportSize-imgs[i].offsetTop;
            if(x>0){
                imgs[i].src = imgs[i].getAttribute('loadpic');   
            }
        }
    }

    setInterval(lazyload,1000);
</script>

2 jQuery的實現方法

/**
* 圖片的src實現原理
*/
$(document).ready(function(){
    // 獲取頁面視口高度
    var viewportHeight = $(window).height();
    var lazyload = function() {
        // 獲取窗口滾動條距離
        var scrollTop = $(window).scrollTop();
        $('img').each(function(){
        // 判斷 視口高度+滾動條距離 與 圖片元素距離文檔原點的高度         
        var x = scrollTop + viewportHeight - $(this).position().top;
        // 若是大於0 即該元素能被瀏覽者看到，則將暫存於自定義屬性loadpic的值賦值給真正的src            
        if (x > 0)
        {
            $(this).attr('src',$(this).attr('loadpic')); 
        }
    })
    }
    // 建立定時器 「實時」計算每一個元素的src是否應該被賦值
    setInterval(lazyload,100);
});

 固然，上述代碼仍是很簡陋，僅僅說了實現的原理，生產環境推薦使用：jquery_lazyload