jQuery.ready（）等效的元素事件监听器？
我正在使用jQuery JavaScript库。 我喜欢在设置DOM时触发的$(document)上准备好的事件监听器。
（非常类似于.onload但没有外部源）
我会发现它非常有用，如果有一个事件监听器与此行为非常相似，但在元素完全加载时触发。 （fe：图片，文字内容极长的Div，如此）
我很欣赏jQuery或JavaScript方法。
当任意DOM元素（如
准备就绪时，不会触发任何事件。 图像有自己的load事件，告诉您图像数据何时加载并已呈现，并且其他一些特殊类型的元素具有事件。 但是，常规DOM元素没有这样的事件。
如果您希望在任意DOM元素准备就绪后立即执行javascript代码，那么唯一的方法是在该DOM元素之后的内联脚本中放置函数调用。 此时DOM元素将准备就绪，但之后的其余DOM可能还没有准备好。 否则，脚本可以放在文档的末尾，也可以在整个文档准备好时触发脚本。
以下是以jQueryforms表示的现有加载事件（这些都可以在普通的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进行了特定的更改。
一旦DOMReady触发，所有元素（包括div和img ）都准备就绪 – 这就是它的含义。
但是，当img标记在其src属性中完全加载图像时，您可以使用load()事件来运行一些代码：
$('img').load(function() { console.log('image loaded'); });
jQuery没有它，但是我们可以创建自己的onDomElementIsReady，工具： jQuery ， ES6 ， Promise和Interval （我很懒，但你可以得到这个想法）
我们将等到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 });
注意：为了改善这一点，我们应该添加一个定时器，如果DOM元素永远不存在，它将reject承诺。