如何让 JQuery 在幻灯片开始前等待页面加载完毕？

Question

我有一个带有旋转标题图片的网站（大家都见过）。我想要做到以下几点：

1. 加载整个页面以及第一张标题图片
2. 在x秒后或下一张图片加载完毕后开始幻灯片过渡

我还没有真正需要这样做的示例。

- DevDevDev

Answer 1

你可以尝试一下

$(function()
{

$(window).bind('load', function()
{

// INSERT YOUR CODE THAT WILL BE EXECUTED AFTER THE PAGE COMPLETELY LOADED...

});
});

我曾经遇到同样的问题，这段代码对我有效。希望它也能解决你的问题！

- Website-Chef

---

@Marin可能是错的，但我认为像这样的绑定已经过时了。我承认这不是很有用的回复。 - Jacob Raccuia

Answer 2

使用jQuery中的document.ready函数可以实现第一个目标。

$(document).ready(function(){...});

可以使用任意数量的插件来实现图片变化。

• http://malsup.com/jquery/cycle/
• http://www.matto1990.com/jquery/slideshow/

如果您想要检查图片是否加载完成，可以使用complete属性。我知道至少malsup jquery cycle幻灯片内部使用了这个函数。

- stimms

---

我认为这些都不会等到下一张图片加载完毕才进行转换，对吗？ - DevDevDev

Answer 3

你可能已经了解了$(document).ready(...), 但你需要的是预加载机制，即在显示内容之前获取数据（文本、图片或其他）。这可以使网站感觉更专业。

看一下jQuery.Preload（还有其他工具）。jQuery.Preload有几种触发预加载的方式，并提供回调功能（当图像预加载时，再显示它）。我经常使用它，效果很好。

以下是使用jQuery.Preload开始的简单步骤：

$(function() {
  // First get the preload fetches under way
  $.preload(["images/button-background.png", "images/button-highlight.png"]);
  // Then do anything else that you would normally do here
  doSomeStuff();
});

- Jacob Marble

---

唯一真正的答案是：没有简单的方法来做到这一点。使用插件。 - Bite code

我不确定为什么您认为使用插件是唯一的“真正”答案。 - David Andres

因为：永远不要重写代码片段，你总能找到做同样事情但写得更好的代码片段。 - Luca Trazzi

Answer 4

$(document).ready机制是在DOM成功加载后触发，但不保证页面引用的图像状态。

如果不确定，请回到经典的window.onload事件：

window.onload = function()
{
  //your code here
};

现在，这显然比jQuery方法慢。但是，你可以在两者之间做出妥协：

$(document).ready
(
  function()
  {
    var img = document.getElementById("myImage");

    var intervalId = setInterval(
                        function()
                        {
                          if(img.complete)
                          {
                            clearInterval(intervalId);
                            //now we can start rotating the header
                          }
                        },
                        50);
  }
);

稍作解释：

1. 我们获取要完全加载的图像的DOM元素

2. 然后设置一个每50毫秒触发一次的间隔。

3. 如果在这些间隔之一期间，该图像的complete属性被设置为true，则清除间隔并可以安全地开始旋转操作。

- David Andres

---

window.onload = function() 是一个不好的做法，它会阻止您设置 onload 事件或者覆盖其他 "onload" 事件。 - Bite code

为避免覆盖已经附加到 window.onload 的钩子函数，可以使用 jQuery 将您的函数附加到 $(window).load(function () {});。请注意保持翻译后的内容与原文意思一致，同时尽可能让翻译更加流畅易懂。 - Andreas Grech

@e-satis：我特别提到了window.onload，因为分配给它的事件处理程序代码保证在图像加载后执行，这与jQuery ready函数的行为不同，并且在OP寻找的另一个极端位置。你是对的，有更好的方法来附加事件，但我不想失去我试图传达的关键点。 - David Andres

@Andreas：了解“Load”函数是件好事。 - David Andres

Answer 5

你试过这个了吗？

$("#yourdiv").load(url, function(){ 

         your functions goes here !!!

}); 

- Najib El Alam

---

那个评论和这个也是。 :o - Brian

Answer 6

如果你向 jQuery 传递一个函数，那么它只有在页面加载完成之后才会执行：

<script type="text/javascript">
$(function() {
    //your header rotation code goes here
});
</script>

- Ryan Doherty

---

“页面已加载”是否意味着所有其他图像也将被加载？ - DevDevDev

不，它只意味着DOM已经被创建。 - stimms

如果你真的需要等待页面加载完成，你可以使用以下代码： $(window).load(function() {//你的代码}); - Ryan Doherty

这个符号只是document.ready的快捷方式，与页面加载事件无关。 - James Westgate