javascript - 如何检查对 innerHTML 的更改是否已完全加载

Question

我正在使用 myDiv.innerHTML = xmlHttp.responseText 通过 javascript 更改 div 的内容。 xmlHttp.responseText 可能包含一些图像，这些图像将在更改 div 的 innerHTML 后加载。

在这些图像完成加载后，即在元素的 innerHTML 完全加载后，是否会在 div、文档或窗口上触发任何事件？

Answer 1

好吧，我又重复了几次你的问题，然后我想出了这个过程:

http://jsfiddle.net/Bladepianist/oyv0f7ns/

HTML

<div id="myDiv">Click Me</div>
<div id="myDiv2">Watch</div>

我使用了两个 div 以便您可以观察不同图像的加载情况。

JS(无 JQuery)

var myDiv = document.getElementById("myDiv");
var myDiv2 = document.getElementById("myDiv2");

var myWatcher = 0;

myDiv.onclick = function () {

    var myImage = "<img id='myImage' src='http://getbootstrap.com/assets/img/sass-less.png' style='max-width: 150px;' />";

    var myImage2 = "<img id='myImage2' src='http://getbootstrap.com/assets/img/devices.png' style='max-width: 150px;'  />";

    myDiv.innerHTML = myImage;
    myDiv2.innerHTML = myImage2;

    // Most important part. Get all the img tags AFTER div was modified.
    var myImg = document.getElementsByTagName("img");

    // Check if each img is loaded. Second img might be loaded before first.
    for (var i = 0; i < myImg.length; i++) {

        myImg[i].onload = function () {
            myWatcher++;

            if (myWatcher == myImg.length) {
                alert("All is loaded.");
                // Might want to call a function for anything you might want to do.
            }
        };
    }
};

在我的示例中，我使用了 click 事件，但最重要的部分当然是在修改 DOM 后立即捕获所有 img 元素。

for 循环允许在每个 img 上添加一个 eventListener(此处:onload)，以便您知道它何时加载。

我有一个计数器，它在加载 img 时递增。当他等于 myImg.length 时，表示一切正常。

PS(编辑) 尚未在其他浏览器(仅 Chrome)上测试过。

希望它能帮到你，哪怕是一点点。