如何判断在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. 《MySchool数据库设计优化》内部测试

    1) 在SQL Server 中,为数据库表建立索引能够( C ). A. 防止非法的删除操作 B. 防止非法的插入操作 C. 提高查询性能 D. 节约数据库的磁盘空间 解析:索引的作用是通过使用索引 ...

  2. Google Play笔记之上架

    我最近负责Google Play上架的主要工作 ,现已进入开放测试阶段(随后就可全球首发~~).接入工作已完成,这篇记录一下上架后期的笔记. 开放测试 开放测试是指对所有玩家进行开放式测试,玩家可以通 ...

  3. 当手机被PS掉，人们看到的是手中的灵魂

    Eric Pickersgill是一名摄影师,最近喜欢拍摄并记录人们使用智能手机的情景,不过不同的是,在最终作品中会将手机从人们手中PS掉,一刹那会进入一个奇怪的世界.黑白照片也极具冲击力. 每个人神 ...

  4. [No00000C]Word快捷键大全 Word2013/2010/2007/2003常用快捷键大全

    Word对于我们办公来说,是不可缺少的办公软件,因为没有它我们可能无法进行许多任务.所以现在的文员和办公室工作的人,最基础的就是会熟悉的使用Office办公软件.在此,为提高大家Word使用水平,特为 ...

  5. Oracle取TOP N条记录(转载)

    在SQL Server里面有top关键字可以很方便的取出前N条记录,但是Oracle里面却没有top的使用,类似实现取出前N条记录的简单方法如下: 方法1:利用ROW_NUMBER函数 取出前5条记录 ...

  6. iOS Block 内存管理的探讨

    在很多情况下Block是造成程序循环引用内存泄漏的元凶.下面我们就讲解一下block对内存管理的影响.在讲解之前.希望大家对block有一定的了解.如果大家还不是太清楚block的实现原理.希望大家可 ...

  7. wk_01

    Python 学习环境搭建 pyenv是个多版本python管理器,可以同时管理多个python版本共存,如pypy,miniconde等等.我们安装时其会将pyenv安装在当前用户家目录中的.pye ...

  8. 【转】LiveWriter插入高亮代码插件介绍 基于SyntaxHighighter

    转自:http://www.cnblogs.com/yaoshiyou/archive/2009/11/25/1610901.html 插件介绍 辛苦了两人小时写日志不小心浏览器崩溃了,发誓以后一定记 ...

  9. Xcode基本操作

    2.偏好设置 通过“command+,”快捷键或”Xcode|Preferences”菜单呼出偏好设置. (1)主题及字体(Preferences->Fonts & Colors) 选中 ...

  10. spring mvc总结1

    1,spring下载 spring更改了官方网站后,找了很长时间没有找到相关的jar包下载路径,然后在网上终于找到相关的路径了 有个树形结构可供选择:http://repo.spring.io/rel ...