javascript - 通过Javascript添加上述内容后发现内容已完全加载

Question

我正在实现(通过纯 JavaScript)类似 Facebook 消息加载的功能。这意味着，如果您滚动到页面末尾，则会加载新的 (HTML) 内容并将其添加到页面末尾。我通过 Ajax 获取这些额外内容。但是当我将其(HTML)添加到页面时，这可能意味着页面必须加载额外的图像。有没有办法让我知道页面何时完成加载所有内容(包括所有新图像)？

Answer 1

您可以将 load 事件 ( https://developer.mozilla.org/en-US/docs/Web/Events/load ) 添加到附加元素:

function LOADER_FUNCTION(e) {
   console.log("LOADED", e.target);
}

var element = document.querySelector('#parent');
for(i=0; i<element.childNodes.length; i++) {
   element.childNodes[i].addEventListener('load', LOADER_FUNCTION);
}

当该元素内的内容准备就绪时，这将调用LOADER_FUNCTION函数。奇怪的是，当连接到父级时，这似乎不起作用。

编辑:

这是一个工作示例。尽管此示例未使用 Ajax(主要是由于 CORS 问题)，但它应该在相同的条件下工作。我使用 innerHTML 设置 DOM，以证明此事件不限于 createElement -> appendChild:

(function(){
  // This Code Runs after DOMContentLoaded
  var element = document.getElementById('parent');

  function LOADER_FUNCTION(e) {
     document.querySelector('.status').innerText = ("LOADED " + e.target.tagName);
     console.log("LOADED", e.target);
  }
  
  element.innerHTML = "<img src='http://i.imgur.com/OfSN9oH.jpg'>";

  for(i=0; i<element.childNodes.length; i++){
    // Attach new event handler
    element.childNodes[i].addEventListener('load', LOADER_FUNCTION);
  }
})()

<div class='status'></div>
<div id="parent"></div>

编辑2:

对于append/innerHTML中的嵌套子元素，使用element.querySelectorAll('*');

https://jsfiddle.net/bckpL9k6/1/