load方法引入本地html报错,分享基于plus.downloader的图片懒加载功能,支持本地缓存v1.1.0...
今天试用了下hello mui上的图片懒加载功能,发现有些地方还无法满足我的需求,ajax动态加载的时候无法实现懒加载。
然后又看了下36kr的示例,因为代码关系实在太多了,耦合度比较高,遂自己动手写了一个轻量级的懒加载功能模块,而且支持图片缓存到本地哦~~~
欢迎各位拍砖,交流碰撞思想!
升级日志
v1.1.0 build 20160107
1、已增加 @LFZ 的代码,不用重复下载两次服务器端的图片
2、新增图片加载淡入特效
3、新增图片加载完成后回调
4、修改data-src为data-lazyload
功能特性
~原生实现,不依赖任何前端框架
~ajax动态加载支持图片懒加载
~支持图片缓存到本地
~轻量模块化
如何使用
1、引入md5.min.js,因为依赖js版md5函数,用于将图片url转换为32位md5
2、在头部js包含下面的lazyload方法函数,否则可能报错函数未定义
3、HTML代码使用ajax动态生成如下img标签,src为默认图片,data-src填写图片网络地址,并且必须包含onload事件来触发懒加载功能。
注意:因为函数依赖plus.io和plus.downloader接口,所以在plus还没ready的时候img onload执行lazyload可能会报错,lazyload比plus先执行完毕。
当然,在真实环境中,不管是商品列表、订单列表等,我们的图片一般都是动态加载的,所以问题不大。
在代码的写法策略上需要使用动态加载方式,尽量不使用写死在html里面。
4、添加.img-lazyload 支持图片淡入样式
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.img-lazyload{-webkit-animation: fadeIn 350ms linear 0ms 1 normal both;animation: fadeIn 350ms linear 0ms 1 normal both;opacity:1;}
5、图片默认缓存到_downloads/image/目录下
活动图
函数源代码
/**
* 图片懒加载
* @param {Object} obj DOMElement
* @param {Function} callback 加载完成回调函数
*
* @author fanrong33
* @version 1.1.0 build 20160107
*/
function lazyload(obj, callback){
var debug = false; // 默认打印调试日志
if(obj.getAttribute('data-loaded')){
return;
}
var image_url = obj.getAttribute('data-lazyload');
debug && console.log(image_url);
// 1. 转换网络图片地址为本地缓存图片路径,判断该图片是否存在本地缓存
// http://...jpg -> md5
// 缓存目录 _downloads/image/(md5).jpg
var image_md5 = md5(image_url);
var local_image_url = '_downloads/image/'+image_md5+'.jpg'; // 缓存本地图片url
var absolute_image_path = plus.io.convertLocalFileSystemURL(local_image_url); // 平台绝对路径
// new temp_img 用于判断图片文件是否存在
var temp_img = new Image();
temp_img.src = absolute_image_path;
temp_img.onload = function(){
debug && console.log('存在本地缓存图片文件'+local_image_url+',直接显示');
// 1.1 存在,则直接显示(本地已缓存,不需要淡入动画)
obj.setAttribute('src', absolute_image_path);
obj.setAttribute('data-loaded', true);
obj.classList.add('img-lazyload');
callback && callback();
return;
}
temp_img.onerror = function(){
debug && console.log('不存在本地缓存图片文件');
// 1.2 下载图片缓存到本地
debug && console.log('开始下载图片'+image_url+' 缓存到本地: '+local_image_url);
function download_img(){
var download_task = plus.downloader.createDownload(image_url, {
filename: local_image_url // filename:下载任务在本地保存的文件路径
}, function(download, status) {
if(status != 200){
// 下载失败,删除本地临时文件
debug && console.log('下载失败,status'+status);
if(local_image_url != null){
plus.io.resolveLocalFileSystemURL(local_image_url, function(entry) {
entry.remove(function(entry) {
debug && console.log("临时文件删除成功" + local_image_url);
// 重新下载图片
download_img();
}, function(e) {
debug && console.log("临时文件删除失败" + local_image_url);
});
});
}
}else{
// 把下载成功的图片显示
// 将本地URL路径转换成平台绝对路径
obj.setAttribute('src', plus.io.convertLocalFileSystemURL(local_image_url));
obj.setAttribute('data-loaded', true);
obj.classList.add('img-lazyload');
callback && callback();
}
});
download_task.start();
}
download_img();
}
}
load方法引入本地html报错,分享基于plus.downloader的图片懒加载功能,支持本地缓存v1.1.0...相关推荐
- vue中实现图片懒加载的方法(一)
1.背景: 前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载. 2.懒加载的意义 图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是 ...
- PC端、移动端(手机端)图片懒加载方法整理
1.PC端图片懒加载: jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们 ...
- JavaScript两个实用的图片懒加载优化方法
文章目录 一.方法一 二.方法二 InterSectionObserver 一.方法一 重点: 1.getBoundingClientRect().top > window.innerHeigh ...
- mint-ui 图片懒加载及请求数据加载中提示方法
图片懒加载: 引入需要的文件 <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></scr ...
- 图片懒加载的原理--三种方法实现
1. 图片懒加载的背景 类似于大型的淘宝商城.京东等网页,设计大量的商品图片信息,如果我们使页面包含的所有图片一次性加载完成,那用户体验很差. 目前流行的做法是滚动动态加载,也就是懒加载,显示在屏幕之 ...
- js 图片懒加载最好的方法
图片懒加载多种方法 第一种 是循环遍历img属性,判断每一个img离顶部的高度减去屏幕的高度是否大于0,小于0的话就就出现在屏幕上了,我们就更改属性显示图片,这种有弊端,因为是监听滚动条,相等于实时监 ...
- vue——图片懒加载和禁止图片使用缓存方法
图片预加载: 图片预加载就是在网页全部加载之前提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就 ...
- jQuery 图片懒加载的方法 以及用$('.lazyImg').each()出错的地方,记录一下~
我高小莫,今天在这里发誓,如果以后能不用jQuery 的我绝不再用,做习惯了前后端分离的项目,再次回到jQuery ,发现异常的恶心~~~~· 不怪谁,怪就怪当初我,选择项目架构的时候为了省力,竟然选 ...
- SpringCloud工作笔记087---SpringBoot启动报错:IDEA 错误: 找不到或无法加载主类 解决方法_connected to the target VM, address:
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 idea 直接运行 springbootAplication 启动类,无法启动web项目,也没有报 ...
最新文章
- Scrapy爬取IT之家
- 打造属于自己的图文符号库
- Pycharm下载 安装 和谐 与 卸载
- rabittmq java spring_消息队列 RabbitMQ 与 Spring 整合使用的实例代码
- 防止黑客入侵的五大技巧
- .NET6之MiniAPI(十五):跨域CORS(下)
- 《转》15种CSS混合模式让图片产生令人惊艳的效果
- P Laguna/ A database for evaluation of algorithms for measurement of QT and other waveform interval
- wordpress限制最大上传文件为3M
- win7录屏_屏幕录制软件哪个好用?推荐三种正确录屏方法
- 小心 transmittable-thread-local 的这个坑
- 计算机绿屏如何解决,电脑开机绿屏怎么解决_win10电脑开机就绿屏的解决方法
- 在VMware ESXi中使用固态硬盘
- 多功能搜索友联自助交换多色彩皮肤网站图片本地化附带交易系统网址导航源码蜘蛛
- Word文档被限制编辑了怎么办?
- asp毕业设计——基于asp+access的中学网站设计与实现(毕业论文+程序源码)——中学网站
- 数据分析工具集合:Tableau入门及其他工具简介
- redis与Memcached
- 怀旧服务器联盟优势,魔兽世界怀旧服阵营怎么选择 联盟和部落区别对比分析...
- 【Angular】Angular8开发拼多多——Angular CLI的环境配置
热门文章
- NCEMASLG-32G的说明
- android APP常用的颜色及代码
- LP Wizard 10.5破解步骤
- IAR FOR ARM 各版本,需要的大家可以收藏了
- qhfl-6 购物车
- linux sit0 wifi,I.MX6 AW-NB177NF wifi HAL 调试修改(示例代码)
- C# 子类实例化基类 基类使用不了子类的方法_C#学习笔记11--接口/泛型
- Serverless:这真的是未来吗?(一)
- 十年后 AI 是什么样?
- 自研云原生数据仓库AnalyticDB再破权威评测TPC-DS世界纪录!