前言

  一些大的外部资源会导致页面加载速度慢,这时候一般会加上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的更多相关文章

  1. JS不同浏览器图片载入处理

    //不同浏览器图片加载判断 p.loadImgVerify = function(oimg,fn){ //载入发起请求 加入JS单线程队列事件(当状态满足时候执行些事件) if (qp_shared. ...

  2. hammer使用: 代码:捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  3. Android Handler 异步消息处理机制的妙用 创建强大的图片载入类

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38476887 ,本文出自[张鸿洋的博客] 近期创建了一个群.方便大家交流,群号: ...

  4. Cocos2d-x 3.0心得(01)-图片载入与混合模式

    近期開始用cocos2dx 3.0做东西,略有心(cao)得(dian),略微作下记录吧. v3.0相对v2.2来说,最引人注意的,应该是对触摸层级的优化.和lambda回调函数的引入(嗯嗯.不枉我改 ...

  5. easyui实现背景图片半透明状态,悬浮在大背景之上

    首先是查找素材,使用AI将所需要的图案画出来,切记将图案的背景设置为所需要的透明状态.项目使用的是easyui架构 为啥加两个背景图呢,因为这样的布局最开始是给一个矩形框加上的背景图片,若是还使用矩形 ...

  6. Android图片载入框架最全解析(一),Glide的基本使用方法

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/53759439 本文同步发表于我的微信公众号.扫一扫文章底部的二维码或在微信搜索 郭 ...

  7. Android批量图片载入经典系列——afinal框架实现图片的异步缓存载入

    一.问题描写叙述 在之前的系列文章中,我们使用了Volley和Xutil框架实现图片的缓存载入,接下来我们再介绍一下afinal 框架的使用. Afinal 是一个android的http框架.sql ...

  8. 一个方便的图片载入框架——ImageViewEx

    我的博客:http://mrfufufu.github.io/ 一.前言 近期在整理项目中的一些代码,以备即将开展的新项目中使用,刚刚整理到一个图片载入的 lib.用起来很的简单,和 picasso ...

  9. Universal-Image-Loader(UIL)图片载入框架使用简介

    这个也是近期项目中使用到的第三方图片载入框架.在这里也自己总结一下,简单的介绍一些使用的方式. UIL图片载入框架特点 简单介绍: 项目地址:https://github.com/nostra13/A ...

随机推荐

  1. 非空与 jquery.each

    return :只能跳出each方法 ,无法跳出aaa() function aaa{ var result = false;            //非空            $("i ...

  2. NHibernate学习教程(6)--事务Transactions

    本节内容 事务概述 1.新建对象 [测试成功提交] [测试失败回滚] 2.删除对象 3.更新对象 4.保存更新对象 结语 上一篇我们介绍了NHibernate中的Insert, Update,  De ...

  3. 自制ACL+DHCP实验(初版)

    (实验用gns模拟器) ACL 实验拓扑: 实验要求: 1.1.1.1→3.3.3.3 不通 11.11.11.11→3.3.3.3 通 2.2.2.2→3.3.3.3 通 实验步骤: 步骤一:基本配 ...

  4. 转:【Java集合源码剖析】Vector源码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/35793865   Vector简介 Vector也是基于数组实现的,是一个动态数组,其容量 ...

  5. 201521123069 《Java程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  6. JAVA课程设计个人博客 学生成绩管理 201521123023 戴建钊

    1. 团队课程设计博客链接 http://www.cnblogs.com/kawajiang/p/7062407.html 2.个人负责模块或任务说明 我主要负责实现随机生成10万个学生及其姓名.学号 ...

  7. JAVA课程设计-计算器(201521123028 李家俊)

    1.团队课程设计博客链接 http://www.cnblogs.com/DevilRay/p/7064482.html 2.个人负责模板或任务说明 主要负责计算器图形界面 包括操作按钮,菜单项以及输出 ...

  8. Spring - BeanPostProcessor接口(后处理器)讲解

    概述: BeanPostProcessor接口是众多Spring提供给开发者的bean生命周期内自定义逻辑拓展接口中的一个,其他还有类似InitializingBean,DisposableBean, ...

  9. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  10. 【BBED】BBED模拟并修复ORA-08102错误

    [BBED]BBED模拟并修复ORA-08102错误 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其 ...