Question

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

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

Answer 1

好吧，我再次多次回答你的问题，我想出了这个过程：

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

<强> HTML

window.dispatchEvent(new Event('resize'));

我使用了两个<div id="myDiv">Click Me</div> <div id="myDiv2">Watch</div>，以便您可以观察到不同图像的加载。

JS（没有JQuery）

div

在我的示例中，我使用了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后立即捕获所有click event元素。

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

我有一个计数器，当加载img时，该计数器会递增。当他等于img时，这意味着一切都很好。

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

希望它可以帮助你，即使是一点点。

Answer 2

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

来做到这一点

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

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"

    }
}

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

3 个答案: