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 - ＆gt; 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/

通过Javascript

1 个答案: