imageCache使用分享

星域轩

看了很多论坛上的imageCache使用方法，有俩点：
1、通过程序循环数据集合的时候闭包加入imageCache方法
2、通过递归数据集合实现
发现都不是我理想的效果，数据集合量较大的时候imageCache处理的时间比不用imageCache展示的时间要慢很多，展示会有明显延迟，最终采取以下方法
还是for循环将html拼接，其中需要缓存的img改成：<img class="imgCache" srcs="'+data[i].imgUrl+'">
$('#data_div').html(htmlStr);
imageCache();

调用加载缓存方法，具体实现如下：
function imageCache(){
          var srcs = $("img.imgCache");
          if (srcs.length > 0) {
                   for(var i=0;i<srcs.length;i++){
                           (function(imgObj){
                                   var imgUrl = imgObj.attr("srcs");
                                 api.imageCache({
                                 url: imgUrl
                             },function(ret,err){
                                 if (ret) {
                                      imgObj.attr("src", ret.url);
                                 }
                             });
                           })($(srcs[i]));
                   }
          }
}


这种方法进入页面还是和原先一样显示数据，然后再去处理缓存图片，页面显示的速度和图片展示的速度都是可以接受的！up

惜仔

翻译成普通版本。。。
<img class="img" src="占位图" srcs="网络图">
调用方法。。。
        function imageCache() {      
            var srcs = $api.domAll('.img');
            if (srcs.length > 0) {
                for (var i = 0; i < srcs.length; i++) {
                    (function(obj){
                        api.imageCache({
                            url: $api.attr(obj, 'srcs')
                        }, function(ret, err){
                            if( ret ){
                                 $api.attr(obj, 'src', ret.url);
                            }
                        });
                    })(srcs[i]);
                }
            }
        }

勇可可【1161277121】

66666666666

年少不轻狂

可以发布到分享区，感谢分享

wiky

这个方法很不错！！！

小明哥哥

我明天给分享一个Avalon 的方法吧。更简单一点。

tanjingwaini

小明哥哥 发表于 2017-1-13 20:24
我明天给分享一个Avalon 的方法吧。更简单一点。

你写了这个方法了吗？方面分享下吗？

小明哥哥

tanjingwaini 发表于 2017-3-10 20:59
你写了这个方法了吗？方面分享下吗？

我同事给写的。很简单的代码。我单独开贴发布一下吧。
现在转用vue了，回头写好vue的再发布一个vue的。

herry

这个函数有个 bug，就是我的数据是用 ajax 从服务器是 获得的，而 imageCache 这个函数，的执行 在他们之前，所以 还要判断 Dom 有 么有加载完。这个 要如何解决？

赵永亮

方法很不错 感谢分享