如何判断在html中图片加载完毕呢?

  给img图片加onload事件呗。

  如何判断一个界面中所有的图片加载完毕呢?

  给所有的图片加上onload事件呗。

  如果有1000张图片那要怎么绑定事件呢?

  我们用事件冒泡捕获, JS中神奇的事件冒泡捕获, 而且只要给父节点绑定一个事件就好了;(但是这样有个缺点)

  这个是一个很重要的结论:

    经过我的实验, 发现img标签加载成功以后的onload事件不会冒泡到他的父元素, 或者是body节点上。

    但是我们通过addEventListener绑定事件捕获, 可以捕获到img标签加载成功;

  DEMO如下:

<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="div0">
</div>
</body>
<script>
var div0 = document.getElementById("div0");
div0.innerHTML = ' <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superplus/img/logo_white_ee663702.png" alt=""/> ' +
' <img src="http://static.cnblogs.com/images/logo_small.gif" alt=""/> ' +
' <img src="http://images2015.cnblogs.com/blog/420264/201511/420264-20151104130547883-1797298825.gif" alt=""/>';
div0.addEventListener("load", function(ev) {
ev = ev || window.event;
console.log("图片加载成功");
console.log( ev.target );
       //很多事情可以在这边实现了,目前又有一张图片加载成功了
},true)
</script>
</html>

  使用addEventLitener 绑定事件一定要最后一个参数, true

    

   经过测试audio和video的onload事件使用同样代码我们无法捕获到,DEMO如下;

<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="div1">
</div>
</body>
<script>var div1 = document.getElementById("div1");
div1.innerHTML = '<audio src="http://www.w3school.com.cn/i/horse.ogg" controls="controls"> Your browser does not support the audio element. </audio> '+
'<video src="http://www.w3school.com.cn/i/movie.ogg" width="320" height="240" controls="controls">Your browser does not support the video tag. </video>';
div1.addEventListener("load",function(ev) {
ev = ev || window.event;
console.log("音频加载成功");
console.log( ev.target );
},true)
</script>
</html>

   因为img标签加载成功是只有捕获阶段, 没有冒泡阶段,为什么呢?

   个人理解 , 如果img标签的onload事件会冒泡的话,那么给window或者document添加的onload事件就会多次执行, 所以冒泡事件是针对于onclick, onmosueover等用户层面的行为,但是捕获的话可以捕获到浏览器或者用户的事件!~。~!

  为什么监听img元素是否加载完毕呢? 他的使用场景是什么样的呢?

  我在项目中某些html页面使用了iframe, 这个iframe的高度是根据内部内容自动设置的, 所以要等到window.onload以后才能给能外部的iframe设置高度, 或者在DOM中每一张图片加载完毕以后同步设置外部iframe的高度;

  使用addEventLitener 的缺点是,IE8和IE8以下的浏览器不支持,所以还是给那1000张图片一个个加onload事件吧....

作者: NONO
出处:http://www.cnblogs.com/diligenceday/

QQ:287101329

使用事件捕获实时捕获img是否加载完毕, 实现iframe内容高度自动适应的更多相关文章

  1. JavaScript在A页面判断B页面加载完毕(iframe load)

    今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画... 而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作. if(docume ...

  2. spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件)转

    关键字:spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件) 应用场景:很多时候我们想要在某个类加载完毕时干某件事情,但是使用了spring管理对象,我们这个类引用 ...

  3. Duilib中Webbrowser事件完善使其支持判断页面加载完毕

    在多iframe的页面中,需要结合DISPID_DOCUMENTCOMPLETE和DISPID_NAVIGATECOMPLETE2两个事件判断页面是否加载完毕,而duilib中没有提供对DISPID_ ...

  4. 深入理解DOM事件类型系列第六篇——加载事件

    前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...

  5. 用window的onload事件,窗体加载完毕的时候

    <script type="text/javascript"> //用window的onload事件,窗体加载完毕的时候 window.onload=function( ...

  6. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  7. spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件)

    关键字:spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件) 应用场景:很多时候我们想要在某个类加载完毕时干某件事情,但是使用了spring管理对象,我们这个类引用 ...

  8. 铵钮提交事件PostBack之后,一些动态加载的物件丢失

    今早起来,发现skype有网友留言,情况大约如下,不过Insus.NET还是先感谢网友的测试.http://www.cnblogs.com/insus/p/3193619.html  如果你有看此篇博 ...

  9. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

随机推荐

  1. ORCHARD 是什么?

    官网 http://orchard.codeplex.com 教程 http://www.cnblogs.com/sunjunlin/p/3876693.html [翻译]从头开始编写一个Orchar ...

  2. 开发Adobe AIR移动应用程序的考虑事项

    http://www.adobe.com/cn/devnet/air/articles/considerations-air-apps-mobile.html Adobe AIR 经过发展演进,已经超 ...

  3. Ubuntu的Mysql指南

    安装MySQL sudo apt-get install mysql-server 这个应该很简单了,而且我觉得大家在安装方面也没什么太大问题,所以也就不多说了,下面我们来讲讲配置. 配置MySQL ...

  4. Java核心技术点之动态代理

    本篇博文会从代理的概念出发,介绍Java中动态代理技术的使用,并进一步探索它的实现原理.由于个人水平有限,叙述中难免出现不清晰或是不准确的地方,希望大家可以指正,谢谢大家:) 一.概述 1. 什么是代 ...

  5. 64位MicrosoftOfficeWord加载EndnoteX7

    来源:http://jingyan.baidu.com/article/fcb5aff7a08036edaa4a71d0.html Win10 64bit 安装 Office2016 64bit 加载 ...

  6. 045医疗项目-模块四:采购单模块—采购单提交(Dao,Service,Action三层)

    我们之前做的就是采购单的编辑,在采购单里面添加了药品,然后我们这篇文章要做的就是说提交这个采购单. 当我们创建完成采购单,确定采购单不再修改,需要提交采购单,由监管单位进行审核. 我们在提交这个采购单 ...

  7. LINQ 常见用法

    以下数据源都假设为data 1.获取某列的不重复数据 List<int> ids =  data.Select(t => t.ID).Distinct().ToList(); 2.对 ...

  8. mac OS X Yosemite 上编译hadoop 2.6.0/2.7.0及TEZ 0.5.2/0.7.0 注意事项

    1.jdk 1.7问题 hadoop 2.7.0必须要求jdk 1.7.0,而oracle官网已经声明,jdk 1.7 以后不准备再提供更新了,所以趁现在还能下载,赶紧去down一个mac版吧 htt ...

  9. JMS + jboss EAP 6.2 示例

    .Net中如果需要消息队列功能,可以很方便的使用微软自带的MSMQ,对应到Java中,这个功能就是JMS(Java Message Service). 下面以Jboss EAP 6.2环境,介绍一下基 ...

  10. 【福吧资源网整理】老男孩-python运维6期 不加密

    老男孩-python运维6期 不加密,连夜整理出来分享给大家老男孩的python教程确实不错. 教程目录: 下载地址:http://www.fu83.cn/thread-204-1-1.html