APP开发平台 > Blog > avalon自定义指令 图片缓存

avalon自定义指令 图片缓存    

  网上分享avalon的图片缓存的方法有很多,今天给大家分享一个比较简单的方法。简单粗暴,直接上代码:

  ➀ 改写avalon.js

  在avalon.js中找到bindingExecutors.attr = function (val, elem, data),添加自定义指令lazy(这个是自己命名的,它的名字关系到html中的调用指令名)

  代码:

  bindingExecutors.attr = function (val, elem, data) {

  var method = data.type,

  attrName = data.param

  if (method === "css") {

  avalon(elem).css(attrName, val)

  } else if(attrName==="lazy"){

  api.imageCache({url:val, thumbnail:false},(function(ret,err){

  this.setAttribute("src",ret.url);

  }).bind(elem));

  }else if (method === "attr") {

  ➁ 页面中得引用

  引入avalon.js这个大家应该都知道,不清楚的可以百度。

  绑定图片的时候代码如下:

<div class="aui-list-item-media">
                                                       <img  ms-attr-lazy="el.cover" src="../../image/default.png">

                                               </div>

  其中ms-attr-lazy="el.cover" 这个是缓冲以后的本地路径 src是图片缓存完以前显示的图片。

  温馨提醒:此方法,开发者需要了解avalon框架的基本用法。

    更多APP教程,请关注www.apicloud.com


2018-03-12 来源:APICloud

APP教程

高效的App定制平台,标准化、便宜、快!

提交APP定制开发需求
x