我正在使用 jQuery JavaScript 库。我喜欢事件监听器准备好上$(document)时DOM建立的是火灾。
（与 .onload 非常相似，但没有外部资源）
如果有一个与此行为非常相似的事件侦听器，但在元素完全加载时触发，我会发现它非常有用。(fe: 图片，一个带有极长文本内容的 Div，例如 )
我很感激 jQuery 或 JavaScript 方法。
元素上的 jQuery.ready() 等效事件侦听器？
IT技术
javascript
jquery
dom
onload
document-ready
2021-02-21 05:09:04
3个回答
当任意 DOM 元素（例如 a ）<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进行了特定类型的更改。
一旦 DOMReady 触发，所有元素（包括div和img）都准备好了 - 这就是它的意思。
但是，load()当img标签在其src属性中完全加载图像时，您可以使用该事件来运行一些代码：
$('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
});
注意：为了改善这一点，我们应该添加一个计时器，reject如果 DOM 元素永远不存在，则Promise。