要求jQuery在执行某项操作之前等待加载所有图像的正式方式

在jQuery中执行此操作时:

$(函数(){
警报(“DOM已加载,但图像不一定全部加载”);
});

它等待DOM加载并执行代码。如果没有加载所有图像,那么它仍然执行代码。如果我们正在初始化任何DOM内容,例如显示或隐藏元素或附加事件,这显然是我们想要的

让我们假设我想要一些动画,我不希望它运行,直到所有的图像加载。jQuery中是否有官方的方法来实现这一点

我最好的方法就是使用<body onload=“finished()”&gt,但我真的不想这么做,除非我不得不这么做

注意:InternetExplorer中的jQuery1.3.1中有一个bug,它实际上是在执行$function(){}中的代码之前等待加载所有图像。因此,如果您正在使用该平台,您将获得我正在寻找的行为,而不是上面描述的正确行为

使用jQuery,您可以使用$(document).ready()在加载DOM时执行某些操作,并使用$(窗口).on(“load”,handler)在加载所有其他对象(如图像)时执行某些操作

如果您有大量的jollyrogerNNJPEG文件(或其他合适的文件),则可以在以下完整的HTML文件中看到差异:

<html>
<头>
<脚本src="jquery-1.7.1.js“&燃气轮机&lt/脚本>
<脚本类型="text/javascript“&燃气轮机;
$(文档).ready(函数(){
警报(“完成”);
            });
&lt/脚本>
&lt/头&gt&书信电报;车身>
你好
<img src=”等;jollyroger00.jpg“&燃气轮机;
<img src=”等;jollyroger01.jpg“&燃气轮机;
/:本文件共100份
<img src=”等;jollyroger99.jpg“&燃气轮机;
&lt/车身>
&lt/html>

这样,在加载图像之前会出现警报框,因为此时DOM已准备就绪。如果您随后更改:

$(文档).ready(函数(){

进入:

$(窗口).on("加载",函数(){

然后,直到加载图像后,警报框才会出现

因此,要等待整个页面准备就绪,可以使用以下方法:

$(窗口).on("加载",函数(){
//在这里编织你的魔法。
});

发表评论