资讯专栏INFORMATION COLUMN

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

RancherLabs / 3279人阅读

摘要:背景初始化依赖的高度计算,必须等完全渲染好后才能使用。最近项目中有个页面需要使用但是这个页面中包含许多图片,并且图片的高度是不定的,如果后就去初始化肯定是有问题的因为图片可能还没全部显示,高度还没完全确定。

背景

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://www.ucloud.cn/yun/50940.html

相关文章

  • 包含图片页面正确使用iScroll

    摘要:背景初始化依赖的高度计算,必须等完全渲染好后才能使用。最近项目中有个页面需要使用但是这个页面中包含许多图片,并且图片的高度是不定的,如果后就去初始化肯定是有问题的因为图片可能还没全部显示,高度还没完全确定。 背景 iScroll初始化依赖DOM的高度计算,必须等DOM完全渲染好后才能使用iScroll。最近项目中有个页面需要使用iScroll,但是这个页面中包含许多图片,并且图片的高度...

    zhangke3016 评论0 收藏0
  • JS进阶篇--iscroll.js使用

    摘要:最好给浏览器或者毫秒的间隙再去初始化。他们控制滚动周期毫秒级别和动画的擦除效果。重新绘制阶段不是瞬时发生的只是范围结束时触发。注如果你有一个相当复杂的结构,你应该给浏览器更多的执行事件,可以设置到毫秒的超时时间。使用方法注册事件。 入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。 尽...

    Genng 评论0 收藏0
  • 使用iscroll4可能会遇到问题(转:记录)

    摘要:只针对,因为的暂时还不支持,会自动选择不用。原因还是和问题一样的,因为屏蔽了默认事件。在技术上解决不了的问题,我认为还是多和产品和沟通比较好,共同协商一个良好的方案。 1.在iscroll4的滚动容器范围内,点击input框、select等表单元素时没有响应这个问题原因在于iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了,解决的方法是...

    keelii 评论0 收藏0
  • 使用iscroll4可能会遇到问题(转:记录)

    摘要:只针对,因为的暂时还不支持,会自动选择不用。原因还是和问题一样的,因为屏蔽了默认事件。在技术上解决不了的问题,我认为还是多和产品和沟通比较好,共同协商一个良好的方案。 1.在iscroll4的滚动容器范围内,点击input框、select等表单元素时没有响应这个问题原因在于iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了,解决的方法是...

    paney129 评论0 收藏0
  • 使用iscroll4可能会遇到问题(转:记录)

    摘要:只针对,因为的暂时还不支持,会自动选择不用。原因还是和问题一样的,因为屏蔽了默认事件。在技术上解决不了的问题,我认为还是多和产品和沟通比较好,共同协商一个良好的方案。 1.在iscroll4的滚动容器范围内,点击input框、select等表单元素时没有响应这个问题原因在于iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了,解决的方法是...

    褰辩话 评论0 收藏0

发表评论

0条评论

RancherLabs

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<