在 jQuery 中,当你这样做时:
$(function() { alert("DOM is loaded, but images not necessarily all loaded"); });
它等待 DOM 加载并执行您的代码。如果未加载所有图像,则它仍会执行代码。如果我们正在初始化任何 DOM 内容,例如显示或隐藏元素或附加事件,这显然是我们想要的。
假设我想要一些动画,并且在加载所有图像之前我不希望它运行。jQuery中是否有官方方法可以做到这一点?
我最好的方法是使用<body onload="finished()">,但我真的不想这样做,除非我必须这样做。
<body onload="finished()">
注意:在 Internet Explorer中的 jQuery 1.3.1中存在一个错误,它实际上会等待所有图像加载,然后再执行其中的代码$function() { }。因此,如果您使用该平台,您将获得我正在寻找的行为,而不是上述正确行为。
$function() { }
使用 jQuery,您可以$(document).ready()在加载 DOM$(window).on("load", handler)时执行某些操作,并在加载所有其他内容(例如图像)时执行某些操作。
$(document).ready()
$(window).on("load", handler)
jollyrogerNN如果您有很多JPEG 文件(或其他合适的文件),则可以在以下完整的 HTML 文件中看到不同之处:
jollyrogerNN
<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>
这样,在加载图像之前会出现警告框,因为此时 DOM 已准备好。如果您随后更改:
$(document).ready(function() {
进入:
$(window).on("load", function() {
然后在 加载图像之前不会出现警告框。
因此,要等到整个页面准备好,您可以使用以下内容:
$(window).on("load", function() { // weave your magic here. });