对元素的jQuery.ready（）等效事件侦听器？

Question

我正在使用jQuery JavaScript库。 我喜欢事件监听器准备在$(document)，DOM设置时触发。

（非常相似.onload）

我会觉得非常有用的，如果有一个事件侦听器至极有着非常相似的行为这一点，但火灾时元素是满载。 （f.e .:图片，Div等）

我将不胜感激jQuery或JavaScript方法。

Answer 1

没有触发的事件当任意DOM元素，如<div>准备就绪。图像有自己的load事件来告诉你何时图像数据已经被加载并且已经被渲染并且一些其他特殊类型的元素具有事件。但是，常规的DOM元素没有这样的事件。

如果您希望JavaScript代码在任意DOM元素准备就绪后立即执行，唯一的方法是将函数调用放置在该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中，你还可以动态加载内容和当内容已经被通知使用​​方法是这样装：

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

内部，这只是做一个AJAX调用获取数据，然后调用后的数据已被阿贾克斯检索，然后插入到文档中的回调。这不是本地的事件。

---

如果你有一些代码，动态加载元素的DOM，你想知道什么时候那些以DOM元素存在，那么最好的办法知道当他们准备是有添加代码他们到DOM创建一些事件告诉你什么时候准备好了。这可以防止电池浪费轮询努力，试图找出元件是否现在在DOM中。

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

Answer 2

所有元素（包括div和img）都会在DOMReady启动后立即就绪 - 这就是它的意思。

但是，您可以使用load()事件时运行一些代码的img标签完全载入图像中是src属性：

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

Answer 3

的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元素永远存在的计时器。