15

我有一个带有旋转标题图片的网站（你们都看过）。我想做以下事情：

  1. 加载整个页面加上第一个标题图像
  2. 每 x 秒或下一张图像完成加载时开始标题图像幻灯片转换，以较晚者为准

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

4

6 回答 6

23

你可以试试

$(function()
{

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

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

});
});

我有同样的问题，这段代码对我有用。它也对你有用！

于 2010-08-02T09:52:47.670 回答
15

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

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

可以使用任意数量的插件来实现不断变化的图像

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

于 2009-09-16T04:02:42.513 回答
13

您可能已经知道 $(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();
});
于 2009-09-16T04:22:36.543 回答
6

$(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，则清除时间间隔并且可以安全地开始旋转操作。

于 2009-09-16T04:07:07.403 回答
3

你试过这个吗？

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

         your functions goes here !!!

});
于 2011-08-11T15:32:44.620 回答
1

如果你向 jQuery 传递一个函数，它在页面加载之前不会运行：

<script type="text/javascript">
$(function() {
    //your header rotation code goes here
});
</script>
于 2009-09-16T04:01:12.283 回答