Question

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

加载整个页面以及第一个标题图像
每隔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(){...});

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

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

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

解释一下：

我们抓取图片的DOM元素我们完全想要的形象装载
然后我们将间隔设置为每50毫秒开火一次。
如果，在其中一个时间间隔内，该图像的完整属性是设置为true，清除间隔并且旋转操作是安全的启动。

Answer 5

你试过这个吗？

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

         your functions goes here !!!

});

Answer 6

如果你传递jQuery一个函数，它将在页面加载后才会运行：

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

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

6 个答案: