Question

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

（非常类似于.onload但没有外部来源）

我觉得它非常有用，如果有一个事件监听器与此行为非常相似，但是当元素完全加载时会触发。（f.e。：图片，文字内容极长的Div，等等）

我很欣赏jQuery或JavaScript方法。

Answer 1

当<div>之类的任意DOM元素准备就绪时，不会触发任何事件。图像有自己的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进行了特定类型的更改。

Answer 2

一旦DOMReady触发，所有元素（包括div和img）都准备就绪 - 这就是它的含义。

但是，当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元素永远不存在，那么这个定义。

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

3 个答案: