元素上的 jQuery.ready() 等效事件侦听器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19355791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery.ready() equivalent event listener on elements?
提问by Steven Palinkas
I am using jQuery JavaScript library.
I like the event listener readyon $(document)that fires when the DOM is set up.
我正在使用 jQuery JavaScript 库。我喜欢事件监听器准备好上$(document)时DOM建立的是火灾。
( Pretty similar to .onload but without external sources )
（与 .onload 非常相似，但没有外部来源）
I would find it very useful, if there was an event listener wich has a very similar behaviour to this, but fires when an elementis fully loaded. (f.e.: Picture, a Div with an extremely long text content, such )
如果有一个与此行为非常相似的事件侦听器，但在元素完全加载时触发，我会发现它非常有用。(fe: 图片，一个带有极长文本内容的 Div，例如 )
I would appreciate both jQuery or JavaScript methods.
我很感激 jQuery 或 JavaScript 方法。
采纳答案by jfriend00
There is no event fired when an arbitrary DOM element such as a <div>becomes ready. Images have their own loadevent 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.
当任意 DOM 元素（例如 a ）<div>准备就绪时，不会触发任何事件。图像有自己的load事件来告诉你图像数据何时被加载和渲染，其他一些特殊类型的元素有一个事件。但是，常规 DOM 元素没有这样的事件。
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.
如果您希望在任意 DOM 元素准备好后立即执行 javascript 代码，唯一的方法是在该 DOM 元素之后立即将函数调用放置在内联脚本中。那时 DOM 元素将准备就绪，但之后 DOM 的其余部分可能尚未准备好。否则，脚本可以放在文档的末尾，或者在整个文档准备就绪时触发脚本。
Here are the existing load events expressed in jQuery form (these can all be done in plain JS too):
以下是用 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);
In jQuery, you can also dynamically load content and be notified when that content has been loaded using the .load()method like this:
在 jQuery 中，您还可以使用如下.load()方法动态加载内容并在加载内容时收到通知：
$( "#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.
在内部，这只是执行 ajax 调用来获取数据，然后在 ajax 检索数据并插入文档后调用回调。这不是本地事件。
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.
如果您有一些代码将元素动态加载到 DOM 中，并且您想知道这些 DOM 元素何时出现，那么知道它们何时准备就绪的最佳方法是让将它们添加到 DOM 的代码创建某种类型的事件告诉你它什么时候准备好了。这可以防止电池浪费轮询工作试图找出元素现在是否在 DOM 中。
It is also possible to use the DOM MutationObserverto see when specific types of changes have been made to the DOM.
也可以使用DOM MutationObserver查看何时对DOM进行了特定类型的更改。
回答by Rory McCrossan
All elements (including divand img) are ready as soon as DOMReady fires - that's what it means.
一旦 DOMReady 触发，所有元素（包括div和img）都准备好了 - 这就是它的意思。
However, you can use the load()event to run some code when an imgtag has fully loaded the image in it's srcattribute:
但是，load()当img标签在其src属性中完全加载图像时，您可以使用该事件运行一些代码：
$('img').load(function() {
console.log('image loaded');
});
回答by ncubica
jQuery don't have it, but we can create our own onDomElementIsReady, Tools: jQuery, ES6, Promiseand Interval(I'm lazy, but you can get the idea)
jQuery的没有它，但我们可以创建自己的onDomElementIsReady，工具：jQuery，ES6，Promise和Interval（我很懒，但你可以得到的想法）
We will wait until the element existed on the DOM and as soon is available we will resolve the promiseresult.
我们将等到元素存在于 DOM 上，一旦可用，我们将解析promise结果。
const onDomElementIsReady = (elementToWatch)=> {
//create promise
return new Promise((res, rej)=> {
let idInterval = setInterval(()=> {
//keep waiting until the element exist
if($(elementToWatch).length > 0) {
clearInterval(idInterval); //remove the interval
res($(elementToWatch)); //resolve the promise
}
},100);
});
};
//how to use it?
onDomElementIsReady(".myElement").then(element => {
//use jQuery element
});
NOTE: To improve this we should add a timer that rejectthe promise if the DOM element never exists.
注意：为了改善这一点，我们应该添加一个计时器，reject如果 DOM 元素永远不存在，则承诺。
