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

Question

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

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

如果有一个事件侦听器具有非常类似的行为，但是在元素完全加载时触发，那将非常有用。（例如：图片，具有极长文本内容的Div等）

我会同时欣赏jQuery或JavaScript方法。

- István Pálinkás

Answer 1

当任意一个DOM元素（例如<div>）准备就绪时，不会触发任何事件。 图像有它们自己的load事件，告诉您图像数据已加载并已呈现，还有一些其他特殊类型的元素也有事件。 但是，常规的DOM元素没有这样的事件。

如果您想要在任意DOM元素准备就绪时执行JavaScript代码，则唯一的方法是在该DOM元素后面的内联脚本中放置一个函数调用。此时该DOM元素将准备就绪，但之后的DOM可能尚未准备就绪。否则，可以将脚本放置在文档末尾或在整个文档准备就绪时触发脚本。

以下是使用jQuery表达的现有load事件（这些也可以在普通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进行了哪些特定类型的更改。

- jfriend00

---

添加关于DOM MutationObservers的信息，以便查看对DOM的更改。 - jfriend00

Answer 2

当DOMReady事件触发时，所有元素（包括div和img）都已准备就绪，这就是它的含义。

但是，你可以使用load()事件来运行一些代码，当一个img标签完全加载了它的src属性中的图像时：

$('img').load(function() {
   console.log('image loaded');
});

- Rory McCrossan

Answer 3

jQuery 没有这个功能，但是我们可以使用 jQuery、ES6、Promise 和 Interval（我很懒，但你可以理解）创建一个 onDomElementIsReady 函数。

我们将等待元素存在于 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元素从未存在，则拒绝承诺。

- ncubica

---

比优雅更有创意。 :) 我非常欣赏ES6的方法。 - István Pálinkás

@StevenPalinkas - 你认真地想过每100毫秒搜索DOM来查找指定的DOM元素的方法是最好的解决方案吗？轮询几乎从来不是任何问题的最佳解决方案。它对CPU效率低下，在移动设备上浪费电池，并且与实际发生变化的时间没有直接联系。相反，您应该使用与首次更改DOM相关的事件通知（您在问题中根本没有提供任何信息）。 - jfriend00

@StevenPalinkas - 另外，你的问题是想知道图片何时完全加载。但这并不能以任何方式实现。它可能会告诉你图片标签在DOM中是否存在，但并不能告诉你它何时被加载完成。 - jfriend00

我想你是对的，这就是我打算用注释标记的不太优雅的地方。我会重新考虑接受标记。 - István Pálinkás