在包含图片的页面中正确使用iScroll

Posted 2021-03-14 homehtml

背景

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();
}