在包括图片的页面中准确运用iScroll

背景

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();
}
    原文作者:普拉斯
    原文地址: https://segmentfault.com/a/1190000010050144
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞