在包含圖片的頁(yè)面中正確使用iScroll

zhangke3016 發(fā)布于2019-08-20 17:46 / 2509人閱讀

摘要：背景初始化依賴的高度計(jì)算，必須等完全渲染好后才能使用。最近項(xiàng)目中有個(gè)頁(yè)面需要使用但是這個(gè)頁(yè)面中包含許多圖片，并且圖片的高度是不定的，如果后就去初始化肯定是有問(wèn)題的因?yàn)閳D片可能還沒(méi)全部顯示，高度還沒(méi)完全確定。

背景

iScroll初始化依賴DOM的高度計(jì)算，必須等DOM完全渲染好后才能使用iScroll。最近項(xiàng)目中有個(gè)頁(yè)面需要使用iScroll,但是這個(gè)頁(yè)面中包含許多圖片，并且圖片的高度是不定的，如果DOM ready后就去初始化iScroll肯定是有問(wèn)題的（因?yàn)閳D片可能還沒(méi)全部顯示，DOM高度還沒(méi)完全確定）。必須等所有圖片加載完才初始化iScroll。

解決方案

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

PS:項(xiàng)目中已經(jīng)使用了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();
}

// 實(shí)現(xiàn)個(gè)簡(jiǎn)單的圖片加載完再初始化iScroll函數(shù)
function lazyInitIScroll(wrap) {
    var $wrap = _.isString(wrap) ? $(wrap): wrap, // zeptojs
        $imgs = $wrap.find("img"),
        imgPromises = _.map($imgs, function(img){ // underscore
            return loadImg(img.src);// 調(diào)用loadImg方法
        });
    // 強(qiáng)化下，如果沒(méi)有圖片，也得兼容
    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對(duì)象，則可以改進(jìn)下lazyInitIScroll函數(shù)：

// 實(shí)現(xiàn)個(gè)簡(jiǎn)單的圖片加載完再初始化iScroll函數(shù)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);// 調(diào)用loadImg方法
        });
    // 強(qiáng)化下，如果沒(méi)有圖片，也得兼容
    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();
}