ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

【APICloud系列|33】通过程序循环数据集合的时候闭包加入imageCache方法

2021-01-18 20:30:43  阅读:144  来源: 互联网

标签:闭包 缓存 imageCache img APICloud 集合 方法


导读:一般实现的两种思路

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



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

 

标签:闭包,缓存,imageCache,img,APICloud,集合,方法
来源: https://blog.csdn.net/weixin_41937552/article/details/112794033

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有