网上分享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