22

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

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

如果有一个与此行为非常相似的事件侦听器，但在元素完全加载时触发，我会发现它非常有用。（fe：图片，文字内容极长的Div，如）

我会欣赏 jQuery 或 JavaScript 方法。

4

3 回答 3

21

当诸如 a 之类的任意 DOM 元素<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);

.load()在 jQuery 中，您还可以使用如下方法动态加载内容并在加载内容时收到通知：

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

在内部，这只是执行 ajax 调用来获取数据，然后在 ajax 检索到数据并插入到文档中之后调用回调。这不是本地事件。

如果您有一些将元素动态加载到 DOM 中的代码，并且您想知道这些 DOM 元素何时存在，那么了解它们何时准备就绪的最佳方法是让将它们添加到 DOM 的代码创建某种类型的事件告诉你它什么时候准备好了。这可以防止电池浪费轮询努力试图找出元素现在是否在 DOM 中。

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

于 2013-10-14T08:10:42.320 回答
4

一旦 DOMReady 触发，所有元素（包括div和）都准备好了 - 这就是它的意思。img

但是，当标签在其属性中完全加载图像时，您可以使用该load()事件运行一些代码：imgsrc

$('img').load(function() {
   console.log('image loaded');
});
于 2013-10-14T08:08:16.397 回答
3

jQuery 没有，但我们可以创建自己的 onDomElementIsReady、Tools: 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 元素永远不存在，则承诺该计时器。

于 2016-08-26T07:20:40.333 回答