在包含圖片的頁面中正確使用iScroll

RancherLabs 發布于2019-08-01 17:05 / 3473人閱讀

摘要：背景初始化依賴的高度計算，必須等完全渲染好后才能使用。最近項目中有個頁面需要使用但是這個頁面中包含許多圖片，并且圖片的高度是不定的，如果后就去初始化肯定是有問題的因為圖片可能還沒全部顯示，高度還沒完全確定。

背景

iScroll初始化依賴DOM的高度計算，必須等DOM完全渲染好后才能使用iScroll。最近項目中有個頁面需要使用iScroll,但是這個頁面中包含許多圖片，并且圖片的高度是不定的，如果DOM ready后就去初始化iScroll肯定是有問題的（因為圖片可能還沒全部顯示，DOM高度還沒完全確定）。必須等所有圖片加載完才初始化iScroll。

解決方案

知道問題所在之后接著就去找解決方案了，千萬不要使用setTimeout設置個延時，然后才去初始化iScroll。

PS:項目中已經使用了zepto的Defered,underscore

// util.js 加載圖片
function loadImg(src) {
    var deferred = Deferred(), // zeptojs Deferred
        img = new Image();
     img.src = src;
     // 圖片加載完就resolve，不care是否成功
     img.onload = complete;
     img.onerror = complete;
     img.onabort = complete;
     function complete() {
         deferred.resolve();
     }
    
    return deferred.promise();
}

// 實現個簡單的圖片加載完再初始化iScroll函數
function lazyInitIScroll(wrap) {
    var $wrap = _.isString(wrap) ? $(wrap): wrap, // zeptojs
        $imgs = $wrap.find("img"),
        imgPromises = _.map($imgs, function(img){ // underscore
            return loadImg(img.src);// 調用loadImg方法
        });
    // 強化下，如果沒有圖片，也得兼容
    if(imgPromises.length === 0) {
        imgPromises.push(function(){
            var deferred = Deferred(); // zeptojs Deferred
            deferred.resolve();
            return deferred.promise();
        })
    }
    $.when.apply(null, imgPromises).then(function(){
        new IScroll($wrap[0]); // 圖片加載完了再初始化iScroll
    });
}

OK，就這樣。如果想返回初始化的iScroll對象，則可以改進下lazyInitIScroll函數：

// 實現個簡單的圖片加載完再初始化iScroll函數V2
function lazyInitIScroll(wrap) {
    var deferred = Deferred(),
        $wrap = _.isString(wrap) ? $(wrap): wrap, // zeptojs
        $imgs = $wrap.find("img"),
        imgPromises = _.map($imgs, function(img){ // underscore
            return loadImg(img.src);// 調用loadImg方法
        });
    // 強化下，如果沒有圖片，也得兼容
    if(imgPromises.length === 0) {
        imgPromises.push(function(){
            var deferred = Deferred(); // zeptojs Deferred
            deferred.resolve();
            return deferred.promise();
        })
    }
    $.when.apply(null, imgPromises).then(function(){
        deferred.resolve(new IScroll($wrap[0]));// 圖片加載完了再初始化iScroll
    });
    return deferred.promise();
}

云服務器 GPU云服務器頁面包含的處理怎樣在oss中使用帶ip限制的訪問控制 C 從 UTF-8 流中讀取字符串的正確在php中使用組件

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

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

在包含圖片的頁面中正確使用iScroll

摘要：背景初始化依賴的高度計算，必須等完全渲染好后才能使用。最近項目中有個頁面需要使用但是這個頁面中包含許多圖片，并且圖片的高度是不定的，如果后就去初始化肯定是有問題的因為圖片可能還沒全部顯示，高度還沒完全確定。背景 iScroll初始化依賴DOM的高度計算，必須等DOM完全渲染好后才能使用iScroll。最近項目中有個頁面需要使用iScroll,但是這個頁面中包含許多圖片，并且圖片的高度...

zhangke3016 2019-08-20 17:46 評論0 收藏0
JS進階篇--iscroll.js的使用

摘要：最好給瀏覽器或者毫秒的間隙再去初始化。他們控制滾動周期毫秒級別和動畫的擦除效果。重新繪制階段不是瞬時發生的只是范圍結束時觸發。注如果你有一個相當復雜的結構，你應該給瀏覽器更多的執行事件，可以設置到毫秒的超時時間。使用方法注冊事件。入門 Scroll是一個類，每個需要使用滾動功能的區域均要進行初始化。每個頁面上的iScroll實例數目在設備的CPU和內存能承受的范圍內是沒有限制的。盡...

Genng 2019-08-21 10:37 評論0 收藏0
使用iscroll4可能會遇到的問題(轉：記錄)

摘要：只針對，因為的暫時還不支持，會自動選擇不用。原因還是和問題一樣的，因為屏蔽了默認事件。在技術上解決不了的問題，我認為還是多和產品和溝通比較好，共同協商一個良好的方案。 1.在iscroll4的滾動容器范圍內，點擊input框、select等表單元素時沒有響應這個問題原因在于iscroll需要一直監聽用戶的touch操作，以便靈敏的做出對應效果，所以它把其余的默認事件屏蔽了，解決的方法是...

keelii 2019-08-20 17:06 評論0 收藏0
使用iscroll4可能會遇到的問題(轉：記錄)

摘要：只針對，因為的暫時還不支持，會自動選擇不用。原因還是和問題一樣的，因為屏蔽了默認事件。在技術上解決不了的問題，我認為還是多和產品和溝通比較好，共同協商一個良好的方案。 1.在iscroll4的滾動容器范圍內，點擊input框、select等表單元素時沒有響應這個問題原因在于iscroll需要一直監聽用戶的touch操作，以便靈敏的做出對應效果，所以它把其余的默認事件屏蔽了，解決的方法是...

褰辯話 2019-08-29 12:43 評論0 收藏0