avalon自定义指令 图片缓存

Posted apicloud

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

以上是关于avalon自定义指令 图片缓存的主要内容,如果未能解决你的问题,请参考以下文章

Vue 自定义图片懒加载指令v-lazyload

vue项目创建自定义指令处理img地址失效问题

vue项目创建自定义指令处理img地址失效问题

Vue.js自定义指令的用法与实例

vue3.0中用自定义指令实现图片懒加载

Vue自定义指令及实现图片懒加载指令