要求jQuery在执行某些操作之前先等待所有图像加载的官方方式 [英] Official way to ask jQuery wait for all images to load before executing something
问题描述
在jQuery中，当您执行此操作时:
In jQuery when you do this:
$(function() {
alert("DOM is loaded, but images not necessarily all loaded");
});
它等待DOM加载并执行您的代码.如果未加载所有映像，则它仍将执行代码.如果我们要初始化任何DOM东西(例如显示或隐藏元素或附加事件)，显然这就是我们想要的.
It waits for the DOM to load and executes your code. If all the images are not loaded then it still executes the code. This is obviously what we want if we're initializing any DOM stuff such as showing or hiding elements or attaching events.
让我们说我想要一些动画，并且我希望它在所有图像加载完毕后才运行. jQuery中有正式的方法吗?
Let's say though that I want some animation and I don't want it running until all the images are loaded. Is there an official way in jQuery to do this?
我最好的方法是使用<body onload="finished()">，但是除非需要，否则我真的不想这样做.
The best way I have is to use <body onload="finished()">, but I don't really want to do that unless I have to.
注意:存在一个错误Internet Explorer中的jQuery 1.3.1 实际上在执行$function() { }中的代码之前确实等待所有图像加载.因此，如果您使用该平台，则会得到我正在寻找的行为，而不是上面描述的正确行为.
Note: There is a bug in jQuery 1.3.1 in Internet Explorer which actually does wait for all images to load before executing code inside $function() { }. So if you're using that platform you'll get the behavior I'm looking for instead of the correct behavior described above.
推荐答案
使用jQuery，当 DOM 加载时，您可以使用$(document).ready()执行某些操作，而在所有其他条件下使用$(window).on("load", handler)执行某些操作诸如图像之类的东西也会被加载.
With jQuery, you use $(document).ready() to execute something when the DOM is loaded and $(window).on("load", handler) to execute something when all other things are loaded as well, such as the images.
如果您具有jollyroger JPEG文件(或其他合适的文件)，则可以在下面的完整HTML文件中看到区别:
The difference can be seen in the following complete HTML file, provided you have a jollyroger JPEG files (or other suitable ones):
<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert ("done");
});
</script>
</head><body>
Hello
<img src="jollyroger00.jpg">
<img src="jollyroger01.jpg">
// : 100 copies of this
<img src="jollyroger99.jpg">
</body>
</html>
这样，在加载图像之前会出现警告框，因为DOM已准备就绪.如果您随后更改:
With that, the alert box appears before the images are loaded, because the DOM is ready at that point. If you then change:
$(document).ready(function() {
进入:
$(window).on("load", function() {
然后，直到 图像加载后，警告框才会出现.
then the alert box doesn't appear until after the images are loaded.
因此，要等到整个页面准备就绪，您可以使用类似以下的方法:
Hence, to wait until the entire page is ready, you could use something like:
$(window).on("load", function() {
// weave your magic here.
});
这篇关于要求jQuery在执行某些操作之前先等待所有图像加载的官方方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
