基于plus.downloader的图片懒加载功能,支持本地缓存

简单说一下

在app中,对一些变动不频繁的图片数据(如个人头像等),是需要存储在本地的。我相信这对大多数的app都是强需求的。

怎么使用呢

img标签默认都有data-src属性,用来存放网络链接,src属性初始是最好给一个默认本地图片链接,下载好会自动替换掉

<img data-src="远程链接" src="默认图片">
  1. 如果在列表中,通过下拉刷新、上拉刷新加载数据,加载下一页的时候可以如下做:

    一次新增多条数据时,为避免重复渲染页面及重新下载正在下载中的图片等问题,新增的img要设置data-pageno属性,如下使用arttemplate写的模板
<script id="tmpl" type="text/html">
{{each items as item i}}
<li class="mui-table-view-cell" data-id='{{item.id}}'>
<img data-src="{{item.url}}" data-pageno="{{item.pageno}}" src="img/default.png">
</li>
{{/each}}
</script>

在js中怎么用呢

var html = template('tmpl', data);
document.querySelector("#pullrefresh").innerHTML += html;
lazyImg.pageno=data.pageno;
lazyImg.lazyLoad();
  1. 如果不需要分页或者零散的数据,直接添加lazy类就可以了
<img data-src="远程链接" src="默认图片" class="lazy">

然后直接调用lazyImg.lazyLoad()就可以了

注意

lazyimg.js是结合cache.js一齐使用的,代码都已提交至github

地址在https://github.com/phillyx/MUIDemos/tree/master/js/lazyimg.js

也可直接使用合并后的代码https://github.com/phillyx/MUIDemos/tree/master/dist/common.js

MUI - 基于plus.downloader的图片懒加载功能,支持本地缓存的更多相关文章

  1. MUI - 解决动态列表页图片懒加载再次加载不成功的bug

    首先描述一下功能 实现列表页动态加载 通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现. http://www.cnblogs.com/philly ...

  2. webapp图片懒加载实现

    图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...

  3. Zepto picLazyLoad Plugin,图片懒加载的Zepto插件

    嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...

  4. 基于javascript实现图片懒加载(亲测有效)

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  5. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  6. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  7. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  8. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  9. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

随机推荐

  1. 转:linux驱动开发的经典书籍

    源地址:http://www.cnblogs.com/xmphoenix/archive/2012/03/27/2420044.html Linux驱动学习的最大困惑在于书籍的缺乏,市面上最常见的书为 ...

  2. Windows 10专业版激活(附激活码)

    安全密钥:BT6TH-FN8VP-6WGCK-6BM9R-MWRDB(使用有效,在物理机,虚拟机都激活了一次) 六一八期间自己买了配件第一次组了台式机,系统是在123pe下的原版win10,装好机器之 ...

  3. Codec入门

    Codec 提供了一些公共的编解码实现,比如Base64, Hex, MD5等等. 工具类 package com.cxl.beanutil.util; import org.apache.commo ...

  4. mysql把表的指定字段值赋给本表另一个字段

    原本是主键一对一关联的,后来发现这样操作很不方便,改成主外键一对一 所以添加一个外键字段bodyId(文章正文单独存一个表) UPDATE t_article SET bodyId=id; 但是等了半 ...

  5. 【DM642学习笔记九】XDS560仿真器 Can't Initialize Target CPU

    以前用的瑞泰的ICETEK-5100USB仿真器,现在换成XDS560试了试,速度快多了.把720*576的图片在imgae中显示也只需要四五秒钟.而5100仿真器需要三四分钟. 仿真器驱动安好后,刚 ...

  6. 《数据结构与算法分析——C语言描述》ADT实现(NO.00) : 链表(Linked-List)

    开始学习数据结构,使用的教材是机械工业出版社的<数据结构与算法分析——C语言描述>,计划将书中的ADT用C语言实现一遍,记录于此.下面是第一个最简单的结构——链表. 链表(Linked-L ...

  7. Luogu P3254 圆桌问题(最大流)

    P3254 圆桌问题 题面 题目描述 假设有来自 \(m\) 个不同单位的代表参加一次国际会议.每个单位的代表数分别为 \(r_i (i =1,2,--,m)\) . 会议餐厅共有 \(n\) 张餐桌 ...

  8. openldap 2.4 centos7 常用配置

    新版的openldap弃用了sldap.conf配置文件,引入一种动态配置,所以尽量不要直接修改配文件 如果直接修改了配置文件可以用slaptest -u命令检查 1.安装openldap,可能需要e ...

  9. linux 修改命令提示符&ubuntu目录颜色个性化

    1.linux 命令提示符个性化 在 ANSI 兼容终端(例如 xterm.rxvt.konsole 等)里, 可以用彩色显示文本而不仅仅是黑白. 本文示范了如何使用粗体和彩色的文字.     相信每 ...

  10. Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---策略模式之MiniDuckSimulator[转]

     1  2{<HeadFirst设计模式>之策略模式 }  3{ 本单元中的类为策略类           }  4{ 编译工具: Delphi7.0           }  5{ E- ...