jquery的懶加載的原理及實現

這次帶給大家jquery的懶加載的原理及實現，實現jquery的懶加載注意事項有哪些，下面就是實戰案例，一起來看一下。

懶載入的原理

1、程式碼實現，載入到目前視窗：

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

2、再加入上瀏覽器的事件監聽函數，讓瀏覽器每次捲動就檢查元素是否出現在視窗視覺範圍內：

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

3、加油吧，皮卡丘！

var hasShowed = false;
$(window).on("sroll",function{    if (hasShowed) {        return;
    } else {        if (isVisible($node)) {
            hasShowed = !hasShowed;            console.log(true);            //ajax请求刷新view层
        }
    }
})

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

VUE-CLI @2.9.1以後版本的問題

WebStorm怎麼自訂使用者設定

#

以上是jquery的懶加載的原理及實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！