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

【问题标题】：How to check if changes to innerHTML have completely loaded如何检查对 innerHTML 的更改是否已完全加载
【发布时间】：2015-05-29 22:20:22
【问题描述】：

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

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

【问题讨论】：

javascript executing function after full image load的可能重复
它不是重复的，因为它指的是预先存在的元素上的属性更改。在这里，新的 html 内容被包含在一个 div 中。
我想说你们俩都是对的。这个问题不是这个问题的重复，但给出的答案应该仍然对你有用；您需要查询所有图像并向它们添加加载事件。

标签： javascript html

【解决方案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 event，但最重要的部分当然是在您修改 DOM 后立即捕获所有 img 元素。

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

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

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

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

【讨论】：

这解决了我的大部分问题，所以我将其标记为我的答案。但是元素样式表中指定的图像呢？
抱歉延迟：我们很忙^^"。无论如何。我仍然尝试在元素样式表中查看图像，因为我在写答案时没有考虑过，但到目前为止，我可以'找不到任何东西。我认为这个问题应该有一个完整的问题。

【解决方案2】：

一种方法是通过responseText 搜索<img> 并添加onload="function()"。你可以用responseText.replace(/<img/g,"<img onload=\"function\"") 做到这一点。

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

【讨论】：

【解决方案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"

    }
}

【讨论】：

这没有回答问题。