在执行某事之前要求 jQuery 等待所有图像加载的官方方式

小编典典

在执行某事之前要求 jQuery 等待所有图像加载的官方方式

all

在 jQuery 中，当你这样做时：

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

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

假设我想要一些动画，并且在加载所有图像之前我不希望它运行。jQuery中是否有官方方法可以做到这一点？

我最好的方法是使用<body onload="finished()">，但我真的不想这样做，除非我必须这样做。

注意：在 Internet Explorer中的 jQuery 1.3.1中存在一个错误，它实际上会等待所有图像加载，然后再执行其中的代码$function() { }。因此，如果您使用该平台，您将获得我正在寻找的行为，而不是上述正确行为。

阅读 83

2022-03-03

共1个答案

小编典典

使用 jQuery，您可以$(document).ready()在加载 DOM$(window).on("load", handler)时执行某些操作，并在加载所有其他内容（例如图像）时执行某些操作。

jollyrogerNN如果您有很多JPEG 文件（或其他合适的文件），则可以在以下完整的 HTML 文件中看到不同之处：

<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.
});

2022-03-03