zoukankan      html  css  js  c++  java
  • img标签过滤加fs模块实现图片文件缓存


    方法一:
    function
    iCache(selector) { selector.each(function(data) { //msg(data); ! function(data) { var url = selector.eq(data).attr("src"); var img = this; var filename = GetFileName(url); var path = "cache://" + filename; var obj = api.require('fs'); obj.exist({ path : path }, function(ret, err) { //msg(ret); if (ret.exist) { if (ret.directory) { //api.alert({msg:'该路径指向一个文件夹'}); } else { //api.alert({msg:'该路径指向一个文件'}); //selector.eq(data).src=path; selector.eq(data).attr('src', null); path = api.cacheDir + '/' + filename; selector.eq(data).attr('src', path); //console.log(selector.eq(data).attr("src")); } } else { api.download({ url : url, savePath : path, report : false, cache : true, allowResume : true }, function(ret, err) { //msg(ret); if (ret) { var value = ('文件大小:' + ret.fileSize + ';下载进度:' + ret.percent + ';下载状态' + ret.state + '存储路径: ' + ret.savePath); } else { var value = err.msg; }; }); } }); }(data); }); };

    1.定义使用标签<img src="http://域名/aaa.jpg" class="cache">,比如
    <body>
    <ul>
    <li><img src="http://域名/a.jpg" class="cache"></li>
    <li><img src="http://域名/ab.jpg" class="cache"></li>
    <li><img src="http://域名/aab.jpg" class="cache"></li>
    <li><img src="http://域名/aaab.jpg" class="cache"></li>
    </ul>
    </body>
    //此处是引用的库文件,api.js,zepto.js等
    <script     XXXXX  >
    <script>
      function iCache(){
      //上面的定义
    }
    apiready=function(){
    //(1)初始化工作

    //2获取数据

    //3封装页面

    //4过滤页面链接

    iCache($('.cache'));
    }

    </script>


    2.引入zepto.js

    3.利用dom.js等模板库或者封装字符串做好页面元素布局

    4.iCache($('.chache'))调用即可

    效果,第一次是使用网络路径,之后即可缓存到本地,后面打开就不会去访问网络地址了。

    二:使用apicloud的 imgcache方法

    图片

    <img onload="imageCache(this)" data-url="{{=value.img_url}}" class="thumbnail" src="../image/zd.png">
    • 图片src必须为存在的图片,否则不会启用
      imageCache
      方法
    //列表图片缓存
    function imageCache(ele_){
            var imageURL = $api.attr(ele_, 'data-url');
            api.imageCache({
                url: imageURL
            }, function(ret, err){
                    if(ret.status){
                            ele_.src = ret.url;
                            $api.removeAttr(ele_, 'data-url');
                    }
            });
    }

    简答说,就是不直接设置src图片属性,而是交给imageCache,imageCache内部的处理逻辑应该是如果本地有,就直接返回本地地址,如果本地没有,就下载后返回本地地址(YY); 图片路径用 data-url 表示不直接用使用 src

    apicloud 人脸识别登录

    http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=14931

  • 相关阅读:
    sql语句中in和exists的区别
    springboot整合kafka
    多线程基础(三)线程通信
    多线程基础(四)线程控制
    多线程基础(二)线程状态
    创建计算字段
    MySQL学习之正则表达式篇
    response没有实现跳转,而是提示浏览器下载文件
    AJAX简述
    四大作用域
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/6733430.html
Copyright © 2011-2022 走看看