iscroll.js和lazyload.js的兼容（滑動時，緩沖好的圖片不更新）

Cheng_Gang 發布于2019-08-21 11:39 / 1109人閱讀

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

以前在做項目的時候，把jquery.lazyload.js和iscroll.js一起使用，當滑動頁面的時候，iscroll的滑動效果出來了，但是圖片懶加載的效果沒出來，主要是因為圖片緩沖完畢后不能及時刷新
解決兩者兼容問題操作：

1、（iscroll.js和lazyload.js的兼容（滑動時，緩沖好的圖片不更新））：

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

原理是：只要瀏覽器滾動，那么圖片就會刷新，所以在scroll滾動時模擬瀏覽器滾動，這個問題就解決了。
另外我的這段代碼可謂神來之筆，大家好好看看

2、

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

下面先給大家看個全的代碼，復制粘貼可直接看到全部效果。
若不能，請自行導入：
jquery-1.7.1.min.js,
jquery.lazyload.js,
iscroll.js三個庫。









title

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86971.html

移動前端知識總結

摘要：基礎知識頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面忽略將頁面中的數字識別為電話號碼忽略平臺中對郵箱地址的識別當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對的版本以后，上已看不到效果將網站添加到主屏幕快 meta基礎知識H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面忽略將頁面中的數字識別為電話號碼忽略Android平臺中對郵箱地址的識別當網站添加到主屏幕快...

gotham 2019-08-29 11:08 評論0 收藏0
移動前端知識總結

摘要：基礎知識頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面忽略將頁面中的數字識別為電話號碼忽略平臺中對郵箱地址的識別當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對的版本以后，上已看不到效果將網站添加到主屏幕快 meta基礎知識H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面忽略將頁面中的數字識別為電話號碼忽略Android平臺中對郵箱地址的識別當網站添加到主屏幕快...

MartinDai 2019-08-01 15:36 評論0 收藏0
移動前端知識總結

摘要：基礎知識頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面忽略將頁面中的數字識別為電話號碼忽略平臺中對郵箱地址的識別當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對的版本以后，上已看不到效果將網站添加到主屏幕快 meta基礎知識H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面忽略將頁面中的數字識別為電話號碼忽略Android平臺中對郵箱地址的識別當網站添加到主屏幕快...

mengera88 2019-08-20 10:21 評論0 收藏0
關于數據異步加載引起Iscroll.js布局出錯的解決方案

摘要：今天要說的就是用實現局部滾動出現頁面布局的問題。問題頁面底部多出一部分或是頁面顯示不全，拉動回彈后內容又顯示不全。原因數據異步加載，無法正確獲取頁面元素的真實高度。自定義方法請求成功切換頁面后刷新解決異步加載數據布局出錯或相信對于前端攻城獅來說Iscroll.js,大家并不陌生，lite版本只有24kb。但可以解決 1、position:fixed在IOS端的兼容性問題 >移動端vi...

MonoLog 2019-08-20 17:04 評論0 收藏0