jQuery.ready()等效的元素事件监听器？

Question

我正在使用jQuery JavaScript库.我喜欢的事件监听器准备好上$(document)时DOM设置将触发.

(非常类似于.onload但没有外部源)

我会发现它非常有用,如果有一个事件监听器与此行为非常相似,但在元素完全加载时触发.(fe:图片,文字内容极长的Div,如此)

我很欣赏jQuery或JavaScript方法.

Answer 1

当诸如a之类的任意DOM元素<div>变为就绪时,不会触发事件.图像有自己的load事件来告诉您图像数据何时被加载并且已经渲染并且一些其他特殊类型的元素具有事件.但是,常规DOM元素没有这样的事件.

如果您希望在任意DOM元素准备就绪后立即执行javascript代码,那么唯一的方法是将函数调用放在该DOM元素之后的内联脚本中.此时DOM元素将准备就绪,但之后的其余DOM可能还没有准备好.否则,脚本可以放在文档的末尾,也可以在整个文档准备好时触发脚本.

以下是以jQuery形式表示的现有加载事件(这些都可以在普通的JS中完成):

// when a particular image has finished loading the image data
$("#myImage").load(fn);

// when all elements in the document are loaded and ready for manipulation
$(document).ready(fn);

// when the DOM and all dynamically loaded resources such as images are ready
$(window).load(fn);

在jQuery中,您还可以动态加载内容,并在使用以下.load()方法加载内容时收到通知:

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

在内部,这只是执行ajax调用来获取数据,然后在ajax检索数据之后调用回调,然后将其插入到文档中.这不是本地事件.

如果你有一些代码动态地将元素加载到DOM中,并且你想知道这些DOM元素何时存在,那么了解它们何时就绪的最佳方法是将它们添加到DOM中的代码创建一些排序当事件准备好时告诉你的事件.这可以防止电池浪费轮询工作,试图找出元素现在是否在DOM中.

也可以使用DOM MutationObserver来查看何时对DOM进行了特定的更改.