實現jquery懶加載、回到頂部-js教程-PHP中文網

實現jquery懶加載、回到頂部

jacklove

發布： 2018-05-21 13:47:37

原創

1365 人瀏覽過

本篇教你如何實現jquery的懶加載會到頂部。

如何判斷一個元素是否出現在視窗視覺範圍（瀏覽器的上緣和下緣之間，肉眼可視）。寫一個函數 isVisible實作

function isVisible($node){    var winH = $(window).height(), 
        winS = $(window).scrollTop(),
        nodeHeight = $node.height(),
        nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){            return true;
        }else{            return false;
        }
}

登入後複製

當視窗滾動時，判斷一個元素是不是出現在視窗視覺範圍。每次出現都在控制台列印 true 。用程式碼實作

function isVisible($node){
    $(window).on(&#39;scroll&#39;,function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            console.log(true);
        }else{            console.log(false);
        }
    });
}

登入後複製

isVisible($node);

當視窗滾動時，判斷一個元素是不是出現在視窗視覺範圍。在元素第一次出現時在控制台列印true，以後再次出現不做任何處理。用程式碼實作

function isVisible($node){
    $(window).on(&#39;scroll&#39;,function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            if(!$node.attr("data-sc")){                console.log(true);
                $node.attr("data-sc",true); 
            }else{                return;
            }
        }else{            return;
        }
    });
}
isVisible($node);

登入後複製

圖片懶載入的原理是什麼？

在頁面載入的時候將頁面的img的位址指向一個小的的同樣的白色圖片，將真實的圖片位址放在創建的自訂屬性中如：

<img src="small.png" data-src="true.png">

登入後複製

src為小圖位址，data-src為真實位址。
當圖片出現在視窗視覺區域時，將自訂屬性裡的真實圖片位址賦給src為懶載入的實作原理。

本篇對jquery進行了講解，更多相關內容請關注php中文網。