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

RancherLabs 发布于2019-08-01 17:05 / 3451人阅读

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

背景

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中使用组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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