iscroll.js和lazyload.js的兼容（滑動(dòng)時(shí)，緩沖好的圖片不更新）

Cheng_Gang 發(fā)布于2019-08-21 11:39 / 1165人閱讀

摘要：另外我的這段代碼可謂神來(lái)之筆，大家好好看看這一步很重要，否則圖片不能完成緩沖效果原理在正在加載完后，就設(shè)置為可以緩沖。加載圖片使用的效果淡入在離可視區(qū)以內(nèi)的圖片也開(kāi)始加載了，提升體驗(yàn)度取消等默認(rèn)不可點(diǎn)擊效果解決。

以前在做項(xiàng)目的時(shí)候，把jquery.lazyload.js和iscroll.js一起使用，當(dāng)滑動(dòng)頁(yè)面的時(shí)候，iscroll的滑動(dòng)效果出來(lái)了，但是圖片懶加載的效果沒(méi)出來(lái)，主要是因?yàn)閳D片緩沖完畢后不能及時(shí)刷新
解決兩者兼容問(wèn)題操作：

1、（iscroll.js和lazyload.js的兼容（滑動(dòng)時(shí)，緩沖好的圖片不更新））：

onScrollMove: function(){
    $("#"+id).trigger("scroll");//iscroller和loadlazy.js圖片緩沖完畢后不能及時(shí)刷新，加上這個(gè)模擬瀏覽器被滑動(dòng)，那么圖片就可以刷新了
}

原理是：只要瀏覽器滾動(dòng)，那么圖片就會(huì)刷新，所以在scroll滾動(dòng)時(shí)模擬瀏覽器滾動(dòng)，這個(gè)問(wèn)題就解決了。
另外我的這段代碼可謂神來(lái)之筆，大家好好看看

2、

//這一步很重要，否則圖片不能完成緩沖效果（原理：在src正在加載完后，就設(shè)置為可以緩沖。）
        $("#storeImgs ul li img").on("load",function(){
            $("#storeImgs ul li img").lazyload({
                effect: "fadeIn", //加載圖片使用的效果(淡入)
                threshold : 400    //在離可視區(qū)400px以內(nèi)的圖片也開(kāi)始加載了，提升體驗(yàn)度
            });
        });

下面先給大家看個(gè)全的代碼，復(fù)制粘貼可直接看到全部效果。
若不能，請(qǐng)自行導(dǎo)入：
jquery-1.7.1.min.js,
jquery.lazyload.js,
iscroll.js三個(gè)庫(kù)。