使用事件捕获实时捕获img是否加载完毕, 实现iframe内容高度自动适应

  如何判断在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

  使用事件捕获实时捕获img是否加载完毕, 实现iframe内容高度自动适应_第1张图片  

 

   经过测试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内容高度自动适应)