使用事件捕獲實時捕獲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；

　　經過測試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>