圖片延遲加載（lazyload）的實現原理

此前在瀏覽一些網站的時候，發現他們網站的圖片都是你“鼠標”滾到哪，圖片才會加載顯示。當時覺得好神奇，怎么會這么“跟手”呢。

核心原理是：

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