在开始幻灯片放映之前,JQuery是否等待页面完成加载？

Question

我有一个带旋转标题图像的网站(你们都看过它们).我想做以下事情:

1. 加载整个页面加上第一个标题图像
2. 每隔x秒开始转换标题图像幻灯片,或者在下一个图像加载完毕后开始转换,以较晚者为准

我真的不需要一个真正做到这一点的例子.

Answer 1

你可以试试

$(function()
{

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

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

});
});

我遇到了同样的问题,这段代码对我有用.它对你有用吗!

Answer 2

您可能已经知道$(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();
});

Answer 3

那么第一个可以用jquery中的document.ready函数来实现

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

可以使用任意数量的插件实现更改的图像

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

如果您愿意,可以检查图像是否加载了完整的属性.我知道至少malsup jquery循环幻灯片在内部使用了这个函数.

Answer 4

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

如有疑问，请使用好的 ol' 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. 如果在这些间隔之一期间，此图像的完整属性设置为 true，则清除该间隔并且可以安全地开始旋转操作。