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

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

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

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

Answer 1

您可能已经了解了$（document）.ready（…）。 你需要的是一个预加载机制; 在显示数据之前获取数据（文本或图像或其他）的东西。 这可以使网站感觉更专业。

看看jQuery.Preload （还有其他的）。 jQuery.Preload有几种触发预加载的方式，并且还提供回调function（当图像被预加载时，然后显示它）。 我大量使用它，效果很好。

这是开始使用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 2

你可以试试

 $(function() { $(window).bind('load', function() { // INSERT YOUR CODE THAT WILL BE EXECUTED AFTER THE PAGE COMPLETELY LOADED... }); }); 

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

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成功加载后触发，但不保证页面引用的图像的状态。

如有疑问，请回到好的’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，则清除间隔并且可以安全地启动旋转操作。

Answer 5

你试过这个吗？

 $("#yourdiv").load(url, function(){ your functions goes here !!! }); 

Answer 6

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