任務29 - jquery懶加載

問答

如何判斷一個元素是否出現在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數 isVisible實現

function isVisible($node){
    var winH = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offSetTop = $(window).offSet().top;
    if (offSetTop < winH + scrollTop) {
        return true;
    } else {
        return false;
    }
}

當窗口滾動時,判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現

$(window).on("scroll", function{
    if (isVisible($node)){
        console.log(true);
    }
})

當窗口滾動時,判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true,以后再次出現不做任何處理。用代碼實現

var hasShowed = false;
$(window).on("sroll",function{
    if (hasShowed) {
        return;
    } else {
        if (isVisible($node)) {
            console.log(true);
        }
    }
})

圖片懶加載的原理是什么?

  • 原理:先將img標簽中的src鏈接設為同一張圖片(空白圖片),將其真正的圖片地址存儲再img標簽的自定義屬性中(比如data-src)。當js監聽到該圖片元素進入可視窗口時,即將自定義屬性中的地址存儲到src屬性中,達到懶加載的效果。
  • 這樣做能防止頁面一次性向服務器響應大量請求導致服務器響應慢,頁面卡頓或崩潰等問題。

代碼

實現如下回到頂部效果(難度: ***)

實現如下圖片懶加載效果 (難度:***)

實現如下無限滾動效果(難度:****)。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答 1.如何判斷一個元素是否出現在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數 isVisi...
    鴻鵠飛天閱讀 231評論 0 1
  • 問答 1. 如何判斷一個元素是否出現在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數 isVis...
    小木子2016閱讀 210評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 問答 1、如何判斷一個元素是否出現在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數 isVisi...
    咸吧閱讀 159評論 0 0
  • 1918 年,休哈特作為一名物理學家,進入西部電子公司的貝爾實驗室工作。1931年,他出版了《產品制造質量的經濟控...
    郭致星閱讀 10,186評論 0 12