Javascript 加载页面中的所有图像后如何运行 jQuery 代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3670823/
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
How to run a jQuery Code after loading all the images in my page?
提问by faressoft
How to run a jQuery Code after loading all the images in my page ?
加载页面中的所有图像后如何运行 jQuery 代码？
回答by meder omuraliev
$(window).load(function(){})
回答by Peter Ajtai
Checking to see that all imageshave loaded is slightly involved, so unless you have a pressing need to be so precise, it is much easier to check that all image and everything else has loaded:
检查所有图像是否已加载有点复杂，因此除非您迫切需要如此精确，否则检查所有图像和其他所有内容是否已加载要容易得多：
$(window).load(function() { ... });
This makes use of the jQuery .load()method.
这使用了 jQuery .load()方法。
If you do really need to check for specifically only images, then things get a little trickier. I initially wanted to do this:
如果您确实需要专门检查图像，那么事情就会变得有点棘手。我最初想这样做：
$("img").load(function() { ... }); \ THIS IS INCORRECT!!!!!
However the above creates a jQuery object that contains all images, and then it binds function() { ... }to eachof these images. So the above will trigger a function as many times as there are images on the page!
然而，上面创建了一个包含所有图像的 jQuery 对象，然后它绑定function() { ... }到这些图像中的每一个。所以上面会触发一个函数，次数与页面上的图像一样多！
To get around this, we should check how many images there are on the page, and only fire the function once after all those images have been loaded:
为了解决这个问题，我们应该检查页面上有多少图像，并且只在所有这些图像加载后触发一次函数：
$(function() {
// To keep track of how many images have loaded
var loaded = 0;
// Let's retrieve how many images there are
var numImages = $("img").length;
// Let's bind a function to the loading of EACH image
$("img").load(function() {
// One more image has loaded
++loaded;
// Only if ALL the images have loaded
if (loaded === numImages) {
// This will be executed ONCE after all images are loaded.
function() { ... }
}
});
});
回答by faressoft
$(function() {
var length = $('img').length ;
var counter = 0;
$('img').each(function() {
$(this).load(function(){
counter++;
if(counter == length) {
Callback(); //do stuff
}
});
});
});
回答by LCJ
Not a direct answer. Still worth referring.
不是直接回答。还是值得参考的。
Refer
参考
- Run JavaScript Only After Entire Page Has Loaded
- jQuery callback on image load (even when the image is cached)
Code
代码
$(window).bind("load", function() {
// code here
});
回答by renaekathleen
I did something like this recently, but went about it differently.
我最近做了类似的事情，但以不同的方式去做。
$('img').on('load', function(){
$('img').off('load'); //detaches from load event, so code below only executes once
// my code to execute
});
回答by NSCoder
For anyone using jquery this little snippet does the trick (it ensures that all images are loaded before any script inside it are run)...
对于任何使用 jquery 的人来说，这个小片段可以解决问题（它确保在运行其中的任何脚本之前加载所有图像）...
$(window).bind("load", function() {
// code goes here here
});
回答by Ramil
@Peter Ajtai answer will work except on IE's cached images. To make it work with IE, here's a solution: https://stackoverflow.com/a/3877079or by using the imagesLoadedplugin.
@Peter Ajtai 的答案将适用于 IE 的缓存图像。要使其与 IE 一起使用，这里有一个解决方案：https: //stackoverflow.com/a/3877079或使用imagesLoaded插件。
