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

Question

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

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

- Karan Jit Singh

---

可能是JavaScript在完整加载图像后执行函数的重复问题。 - Bladepianist

这不是重复的，因为它涉及对现有元素属性的更改。在这里，新的HTML内容被包含在一个div中。 - Karan Jit Singh

我认为你们两个都是对的。这个问题不是重复的，但是给出的答案仍然应该对你有用；你需要查询所有图像并为它们添加一个加载事件。 - Katana314

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.
            }
        };
    }
};

在我的例子中，我使用了一个“点击事件”，但最重要的部分当然是在修改DOM后捕获所有你的“img”元素。

通过for循环，可以在每个“img”上添加一个事件侦听器（这里是“onload”），以便知道它何时加载完成。

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

PS（编辑）：尚未在其他浏览器上测试（仅限Chrome）。

希望它能对你有所帮助，哪怕只是一点点。

- Bladepianist

---

这解决了我大部分的问题，所以我会将其标记为我的答案。但是那些在元素样式表中指定的图片呢？ - Karan Jit Singh

抱歉耽搁了：周末很忙^^"。无论如何，我仍然尝试查看元素样式表中的图像，因为当我写下我的答案时我没有考虑到它，但是到目前为止，我找不到任何东西。我认为这个问题值得有一个完整的问题来解决。 - Bladepianist

Answer 2

一种方法是在responseText中搜索<img>，并添加onload="function()"。您可以使用responseText.replace(/<img/g,"<img onload=\"function\"")来实现。

正如问题的评论所建议的那样，另一种方法是循环遍历myDiv.getElementsByTagName("img")，并为每个图像添加一个"load"事件监听器。

- sudo rm -rf slash

Answer 3

有一个事件，当图片完全加载后会被触发。因此，在您的ajax请求中，您可以设置一个事件监听器：

xmlhttp.onreadystatechange=function() {

    if (xmlhttp.readyState==4 && xmlhttp.status==200) {

      // readyState==4 means "request finished and response is ready"
      // status==200 means "everything transferred correctly"

    }
}

- Jo Oko

---

这并没有回答问题。 - avrahamcool