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

我正在使用myDiv.innerHTML = xmlHttp.responseText通过JavaScript更改div的内容。 xmlHttp.responseText可能包含一些在div的innerHTML被更改后加载的图像。如何检查对innerHTML的更改是否已完全加载

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

来源

2015-05-29 Karan Jit Singh

[完全图像加载后执行javascript的函数]的可能的副本（http://stackoverflow.com/questions/4100252/javascript-executing-function-after-full-image-load） – Bladepianist

它不是重复的，因为它引用改变先前存在的元素的属性。在这里新的HTML内容被包含在一个div内。 –

我会说你是对的。这个问题不是这个问题的重复，但给出的答案应该对你有用;您需要查询所有图像并向其添加加载事件。 – Katana314

嗯，我通过你的问题又去了几次，我想出了这个过程：

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）上测试过。

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

来源

2015-05-29 14:20:22 Bladepianist

这解决了我的大部分问题，所以我将其标记为我的答案。但是在元素的样式表中指定的图像呢？ –

抱歉，延迟：忙碌我们^^“。无论如何。我仍然试着在元素样式表中查看图像，因为当我编写答案时我还没有看到它，但到目前为止，我找不到任何东西。我认为这个问题应该有一个完整的问题。 – Bladepianist

-1

有一个事件，在图像完全加载后触发。因此，在你的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" 

    } 
}

来源

2015-05-29 13:02:21

这不回答这个问题。 – avrahamcool

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

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

来源

2015-05-29 13:40:55

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

回答

相关问题