基于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. 《DSP using MATLAB》Problem 7.31

    参照Example7.27,因为0.1π=2πf1   f1=0.05,0.9π=2πf2   f2=0.45 所以0.1π≤ω≤0.9π,0.05≤|H|≤0.45 代码: %% +++++++++ ...

  2. django2.x报错No module named 'django.core.urlresolvers'b

    解决方法就是: from django.urls import reverse 最近从django1.9迁移到django2.0中出现一个意外的报错: 这个报错的原因在stack overflow上有 ...

  3. Tensorflow技巧

    1.尽量控制图片大小在1024以内,不然显存会爆炸. 2.尽量使用多GPU并行工作,训练下降速度快. 3.当需要被检测的单张图片里物体太多时,记得修改Region_proposals的个数 4.测试的 ...

  4. Nonsense Time

    Nonsense Time 时间限制: 10 Sec  内存限制: 128 MB 题目描述 You a given a permutation p1,p2,…,pn of size n. Initia ...

  5. hadoop面试题及答案解析

    1.(Datanode)程序负责HDFS数据存储. 2.HDFS中的block默认保存(3份). 3.(TaskTracker)程序通常与NameNode在一个节点启动. 分析:hadoop集群是基于 ...

  6. 在vue项目中正确的引入jquery

    最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的. 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jqu ...

  7. MySQL 普通注册插入优化。

    普通做法是: 用户通过手机号注册.默认是根据这个手机号去用户表里查询,看有没有这个手机号,有那么就提示已注册.否则就执行注册插入数据库操作.这里其实正常注册流程是两次数据库操作的(查询,插入): 优化 ...

  8. 【笔记】LR响应时间

    事务:是指在客户端做一种或多种的业务所需要的操作集. 事务响应时间:是通过记录用户请求的开始时间和服务器返回内容到客户时间的差值来计算用户响应时间. 响应时间是服务器返回和用户请求之间的时间差,那么得 ...

  9. NACOS集群搭建遇到的问题

    搭建NACOS官网教程: https://nacos.io/zh-cn/docs/cluster-mode-quick-start.html 这里说的很详细了.也有中文的.我就记录一下在搭建集群的时候 ...

  10. 在Vmware安装虚拟机WindowsServer 2003

    一.创建并安装虚拟机 新建Windows2003server系统 按照下面操作即可 https://www.cnblogs.com/color-blue/p/8525710.html 二.安装虚拟机 ...