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

Question

我正在使用 jQuery JavaScript 库。我喜欢 $(document) 上的事件监听器 ready，它会在 DOM 设置时触发。

(与 .onload 非常相似，但没有外部源)

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

我希望使用 jQuery 或 JavaScript 方法。

Answer 1

当任意 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 进行了特定类型的更改。