Javascript 完全加载后将事件分配给 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4160614/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
assign event to div when it has loaded fully
提问by amateur
Can I assign an event to a div to fire when all elements of the containing div have loaded fully? eg. if the div contains an image, fire an event on the div when the image has loaded fully. I am using jquery.
当包含 div 的所有元素都已完全加载时，我可以将事件分配给 div 以触发吗？例如。如果 div 包含图像，则在图像完全加载时在 div 上触发事件。我正在使用 jquery。
采纳答案by user113716
Not sure how you're dynamically adding your content, but this example should illustrate how it could work.
不确定您如何动态添加内容，但此示例应该说明它是如何工作的。
It is using .append()to simulate your dynamically loaded content. Then after the append, it uses .find()to find the images, and .load()to attach a load handler to them.
它.append()用于模拟动态加载的内容。然后在追加之后，它用于.find()查找图像，.load()并将加载处理程序附加到它们。
Finally, it returns the lengthproperty of the images. Then in the load handler, as the images finish loading, the length is decremented. Once it gets to 0, all the images are loaded, and the code inside the if()runs.
最后，它返回length图像的属性。然后在加载处理程序中，随着图像完成加载，长度递减。一旦到达0，所有图像都会被加载，并且内部的代码会if()运行。
Example:http://jsfiddle.net/ehwyF/
示例：http : //jsfiddle.net/ehwyF/
var len = $('#mydiv').append('<img src = "http://dummyimage.com/150x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/160x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/170x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/180x90/f00/fff.png&text=my+image" />')
.find('img')
.load(function() {
if( --len === 0) {
alert('all are loaded');
}
}).length;
This way, the code runs based only on the images in #mydiv.
这样，代码仅基于#mydiv.
If there are any images in there that were not dynamic, and therefore shouldn't get the .load()event, you should be able to add a .not()filter to exclude ones the completeproperty is true.
如果那里有任何图像不是动态的，因此不应获取.load()事件，则您应该能够添加.not()过滤器以排除complete属性为 的图像true。
Place this after the .find()and before the .load().
将其放在 之后.find()和之前.load()。
.not(function(){return this.complete})
回答by Amir Raminfar
It's hard to check it for just one div, but may I suggest using $(window).load()to check if all the images have loaded?
很难只检查一个 div，但我可以建议使用它$(window).load()来检查所有图像是否已加载？
UPDATE: If you using ajax then use the callback to see when the json has loaded, and then attach $("div#id img").load() to see when all the images have loaded. Only problem with this is that I have noticed when the image is cached, the loader does not get triggered. :(
更新：如果您使用 ajax，则使用回调查看 json 何时加载，然后附加 $("div#id img").load() 以查看所有图像何时加载。唯一的问题是我注意到当图像被缓存时，加载器没有被触发。:(
回答by generalhenry
If it's just one image you're wanting to wait for you can load the image with ajax and then trigger the event in the ajax callback.
如果它只是您想要等待的一张图像，您可以使用 ajax 加载图像，然后在 ajax 回调中触发事件。
回答by David Ryder
To add to Shadow Wizard's idea, you could try the following code:
要添加 Shadow Wizard 的想法，您可以尝试以下代码：
var totalImages = $(".yourImageClass").length;
var loadedImages = 0;
$(".yourImageClass").bind("onload", function() {
loadedImages++;
if (loadedImages == totalImages) {
//all images have loaded - bind event to DIV now
$("#yourDiv").bind(eventType, function() {
//code to attach
});
}
});
回答by Shadow Wizard is Ear For You
Catch the onload event of all images in the div, in there raise some global counter by 1. If that counter is equal to the amount of images in the div... all images finished loading. Should be simple using jQuery.
捕获 div 中所有图像的 onload 事件，在那里将一些全局计数器加 1。如果该计数器等于 div 中的图像数量...所有图像加载完毕。使用 jQuery 应该很简单。
This will work only for images though, other elements don't have onload event.
但这仅适用于图像，其他元素没有 onload 事件。
