元素上的 jQuery.ready() 等效事件侦听器?

问题描述

我正在使用 jQuery JavaScript 库.我喜欢 $(document) 上的事件侦听器 ready 在设置 DOM 时触发.

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

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

我会欣赏 jQuery 或 JavaScript 方法.

解决方案

当诸如

之类的任意 DOM 元素准备就绪时，不会触发任何事件.图像有自己的 load 事件来告诉你图像数据何时被加载和渲染，以及一些其他特殊类型的元素有一个事件.但是，普通的 DOM 元素没有这样的事件.

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

以下是现有的用 jQuery 形式表达的加载事件(这些也可以在纯 JS 中完成):

//当特定图像完成加载图像数据时$("#myImage").load(fn);//当文档中的所有元素都已加载并准备好进行操作时$(document).ready(fn);//当 DOM 和所有动态加载的资源(如图像)准备就绪时$(window).load(fn);

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

$( "#result" ).load( "ajax/test.html", function() {alert("加载完成.");});

在内部，这只是执行 ajax 调用来获取数据，然后在 ajax 检索数据并插入文档后调用回调.这不是本地事件.

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

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

I am using jQuery JavaScript library. I like the event listener ready on $(document) that fires when the DOM is set up.

( Pretty similar to .onload but without external sources )

I would find it very useful, if there was an event listener which has a very similar behavior to this, but fires when an element is fully loaded. (f.e.: Picture, a Div with an extremely long text content, such )

I would appreciate both jQuery or JavaScript methods.

解决方案

There is no event fired when an arbitrary DOM element such as a <div> becomes ready. Images have their own load event to tell you when the image data has been loaded and has been rendered and a few other special types of elements have an event. But, regular DOM elements do not have such an event.

If you want javascript code to be executed as soon as an arbitrary DOM element is ready, the only way to do that is to place a function call in an inline script right after that DOM element. At that point that DOM element will be ready, but the rest of the DOM afterwards may not yet be ready. Otherwise, the script can be placed at the end of the document or the script can be fired when the whole document is ready.

Here are the existing load events expressed in jQuery form (these can all be done in plain JS too):

// 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);

In jQuery, you can also dynamically load content and be notified when that content has been loaded using the .load() method like this:

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

Internally, this just does an ajax call to fetch the data and then calls the callback after the data has been retrieved by ajax and then inserted into the document. It isn't a native event.

---

If you have some code that is dynamically loading elements in to the DOM and you want to know when those DOM elements are present, then the best way to know when they are ready is to have the code that adds them to the DOM create some sort of event to tell you when it's ready. This prevents battery wasting polling efforts trying to find out if the element is now in the DOM.

It is also possible to use the DOM MutationObserver to see when specific types of changes have been made to the DOM.

这篇关于元素上的 jQuery.ready() 等效事件侦听器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！