實現jquery懶加載、回到頂部

本篇教你如何實現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('scroll',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('scroll',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="/static/imghwm/default1.png"  data-src="small.png"  class="lazy"   data- alt="實現jquery懶加載、回到頂部" >

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

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

相關推薦：

關於this的相關問題

JS陣列、字串及數學函數

關於JS時間物件與遞迴問題

以上是實現jquery懶加載、回到頂部的詳細內容。更多資訊請關注PHP中文網其他相關文章！