我正在使用jQuery JavaScript库。 我喜欢事件监听器准备在$(document)
,DOM设置时触发。对元素的jQuery.ready()等效事件侦听器?
(非常相似.onload)
我会觉得非常有用的,如果有一个事件侦听器至极有着非常相似的行为这一点,但火灾时元素是满载。 (f.e .:图片,Div等)
我将不胜感激jQuery或JavaScript方法。
我正在使用jQuery JavaScript库。 我喜欢事件监听器准备在$(document)
,DOM设置时触发。对元素的jQuery.ready()等效事件侦听器?
(非常相似.onload)
我会觉得非常有用的,如果有一个事件侦听器至极有着非常相似的行为这一点,但火灾时元素是满载。 (f.e .:图片,Div等)
我将不胜感激jQuery或JavaScript方法。
没有触发的事件当任意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进行了特定类型的更改。
所有元素(包括div
和img
)都会在DOMReady启动后立即就绪 - 这就是它的意思。
但是,您可以使用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元素永远存在的计时器。
比优雅更有创意。 :)我非常欣赏ES6的方法。 –
@StevenPalinkas - 说真的,你认为一种方法每隔100毫秒就会搜索你的DOM,直到找到给定的DOM元素才是最好的解决方案?轮询几乎不是任何问题的最佳解决方案。这对CPU来说效率不高,它浪费了移动设备上的电池,并且在发生实际变化时并不直接关系到它。相反,您应该使用事件通知,这些通知与首先导致DOM更改的任何内容(在您的问题中根本不包含任何信息)相关。 – jfriend00
@StevenPalinkas - 另外,你的问题要求知道什么时候图片完全加载。这不以任何方式。它可能会告诉你什么时候图片标记存在于DOM中,但不会在其加载时出现。 – jfriend00
用于辨别解释的+1 –
添加有关DOM MutationObservers以查看DOM更改的信息。 – jfriend00