图片载入状态判断及实现百分比效果loading
前言
一些大的外部资源会导致页面加载速度慢,这时候一般会加上loading效果;这里实现的是根据图片加载进度的百分比loading效果
如何判断图片加载的状态
1、onload onerror
推荐使用这种方法,在图片加载成功后,会触发onload事件,就算有缓存只要重新请求了图片地址,都会触发onload事件;图片加载失败会触发onerror事件。这种方式兼容性良好,推荐
2、imgObj.onreadystatechange
部分浏览器支持此种方法,根据 readState === ‘complete'可判断图片是否加载完成。
测试了下:
chrome,firefox不会触发此事件
IE Edge版本 不会触发此事件
IE 10 9 会触发此事件;更低版本的没有测试
所以不推荐使用
3、imgObj.complete
complete属性可以判断图片是否加载完成。但是不同的浏览器对complete的处理不一致:
如果图片资源正常,图片加载成功 所有浏览器都是 complete从false变为true;
但是如果图片资源异常,图片加载失败 chrome和firefox 在载入失败后从false变为true;但是IE 会一直是false
所以不推荐使用这种方式。
图片资源加载进度
可以判断出单个图片资源是否加载完成了,就很容易计算出整个页面所有图片资源加载的进度了。
document.addEventListener('DOMContentLoaded', function(){
var imgs = document.querySelectorAll('img'), //所有图片资源
show = 0, //百分比
num = 0; //加载完成的个数
var all = imgs.length;
[].slice.call(imgs).forEach(function(element,index){
//不管是否加载成功,都num+1
element.addEventListener('load',function(){
num++;
show = Math.floor(100*num/all); }) element.addEventListener('error',function(){
num++;
show = Math.floor(100*num/all);
})
})
})
在加上蒙版和百分比字样,很容易实现载入的百分比效果。
在页面全部加载完成后,再隐藏蒙版,即可实现比较友好的loading效果了
window.onload = function(){
document.querySelector('.mask').classList.add('hide');
}
图片载入状态判断及实现百分比效果loading的更多相关文章
- JS不同浏览器图片载入处理
//不同浏览器图片加载判断 p.loadImgVerify = function(oimg,fn){ //载入发起请求 加入JS单线程队列事件(当状态满足时候执行些事件) if (qp_shared. ...
- hammer使用: 代码:捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/ 查找和下载. hamme ...
- Android Handler 异步消息处理机制的妙用 创建强大的图片载入类
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38476887 ,本文出自[张鸿洋的博客] 近期创建了一个群.方便大家交流,群号: ...
- Cocos2d-x 3.0心得(01)-图片载入与混合模式
近期開始用cocos2dx 3.0做东西,略有心(cao)得(dian),略微作下记录吧. v3.0相对v2.2来说,最引人注意的,应该是对触摸层级的优化.和lambda回调函数的引入(嗯嗯.不枉我改 ...
- easyui实现背景图片半透明状态,悬浮在大背景之上
首先是查找素材,使用AI将所需要的图案画出来,切记将图案的背景设置为所需要的透明状态.项目使用的是easyui架构 为啥加两个背景图呢,因为这样的布局最开始是给一个矩形框加上的背景图片,若是还使用矩形 ...
- Android图片载入框架最全解析(一),Glide的基本使用方法
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/53759439 本文同步发表于我的微信公众号.扫一扫文章底部的二维码或在微信搜索 郭 ...
- Android批量图片载入经典系列——afinal框架实现图片的异步缓存载入
一.问题描写叙述 在之前的系列文章中,我们使用了Volley和Xutil框架实现图片的缓存载入,接下来我们再介绍一下afinal 框架的使用. Afinal 是一个android的http框架.sql ...
- 一个方便的图片载入框架——ImageViewEx
我的博客:http://mrfufufu.github.io/ 一.前言 近期在整理项目中的一些代码,以备即将开展的新项目中使用,刚刚整理到一个图片载入的 lib.用起来很的简单,和 picasso ...
- Universal-Image-Loader(UIL)图片载入框架使用简介
这个也是近期项目中使用到的第三方图片载入框架.在这里也自己总结一下,简单的介绍一些使用的方式. UIL图片载入框架特点 简单介绍: 项目地址:https://github.com/nostra13/A ...
随机推荐
- Jquery 父级元素、同级元素、子元素
prev():获取指定元素的上一个同级元素(是上一个哦). prevAll():获取指定元素的前边所有的同级元素. find():查找子元素方式 next(): 获取指定元素的下一个同级元素(注意是下 ...
- MPLS VPN随堂笔记3
跨域 ASBR之间运行MPBGP 1.配置AS内部IGP保证环回口互相可达,同时建立LDP邻居 (优先启用 mpls label rang 16 100)方便查看实验现象 2.配置PE1-PE2 PE ...
- 转: 【Java并发编程】之五:volatile变量修饰符—意料之外的问题(含代码)
转载请注明出处: volatile用处说明 在JDK1.2之前,Java的内存模型实现总是从主存(即共享内存)读取变量,是不需要进行特别的注意的.而随着JVM的成熟和优化,现在在多线程 ...
- 团队作业8----第二次项目冲刺(Beta阶段) 第七天
BETA阶段冲刺第六天 1.小会议ing 2.每个人的工作 (1)昨天已完成的工作 完成查重部分 (2) 今天计划完成的工作 (3) 工作中遇到的困难: 尤少辉:在测试的时候发现了,文件名保存到数据 ...
- Swing-JFileChooser的使用
JFileChooser文件选择器是Swing中经常用到的一个控件.它的使用主要包含以下几个参数: 1.当前路径.也就是它第一次打开时所在的路径,许多软件喜欢设置为桌面. 2.文件过滤器.通过设置文件 ...
- 201521123006 《Java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boo ...
- 201521123106 《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学 ...
- 201521123099 《Java程序设计》第9周学习总结
1. 本周学习总结 2. 书面作业 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 容易出现拼写错误还有数组越界的异 ...
- apache: apache-tomcat-6.0.35完整下载
Index of /dist/tomcat/tomcat-6/v6.0.35/bin Name Last modified Size Description Parent Directory - ex ...
- Hyperledger Fabric 1.0 从零开始(五)——运行测试e2e
3:运行测试e2e 3.1.运行fabric-samples的问题说明 该问题说明能够解决6.1.平台特定使用的二进制文件配置第一步的问题.可以选择继续阅读该说明,或者等参考到6.1小节时再反向阅读本 ...