我正在实现(通过纯JavaScript)像facebook的消息加载。这意味着如果滚动到页面的末尾,则会加载新的(HTML)内容并将其添加到页面的末尾。我通过Ajax获得了这些额外的内容。但是当我向页面添加此(HTML)时,可能意味着页面必须加载额外的图像。有没有办法我可以弄清楚页面何时完成加载所有内容,包括所有新图像?
答案 0 :(得分: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('*');