在执行某事之前要求 jQuery 等待所有图像加载的官方方式 [英] Official way to ask jQuery wait for all images to load before executing something
问题描述
In jQuery when you do this:
$(function() {
alert("DOM is loaded, but images not necessarily all loaded");
});
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.
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?
The best way I have is to use <body onload="finished()">, but I don't really want to do that unless I have to.
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.
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.
The difference can be seen in the following complete HTML file, provided you have a lot of jollyrogerNN 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 in total
<img src="jollyroger99.jpg">
</body>
</html>
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() {
into:
$(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屋！
