JQuery 在开始幻灯片之前等待页面完成加载？

Posted 2023-03-13

【中文标题】JQuery 在开始幻灯片之前等待页面完成加载？

【英文标题】：JQuery wait for page to finish loading before starting the slideshow?

【发布时间】：2010-11-28 16:29:23

【问题描述】：

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

加载整个页面以及第一个标题图片 每隔 x 秒或下一张图片完成加载后开始标题图片幻灯片转换，以较晚者为准

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

【参考方案1】：

你可以试试

$(function()


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


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

);
);

我遇到了同样的问题，这段代码对我有用。它也适用于你！

【讨论】：

@Marin 可能是错误的，但我认为 bind 对于这样的东西已被弃用。我承认不是很有用的回复

【参考方案2】：

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

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

任意数量的插件都可以实现图片的变化

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

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

【讨论】：

我认为这些中的任何一个都不会等到下一个 iamge 加载后才转换，对吧？

【参考方案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();
);

【讨论】：

唯一真正的答案：没有简单的方法可以做到这一点。使用插件。

e-satis：我不知道你为什么认为使用插件是唯一“真正”的答案。

因为：永远不要重写一段代码，你总会发现这段代码做同样的事情并且写得更好

【参考方案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);
  
);

稍微解释一下：

我们抓取图像的 DOM 元素 我们完全想要谁的形象 已加载

然后我们将间隔设置为 每 50 毫秒触发一次。

如果在这些间隔之一期间， 此图像的完整属性是 设置为true，清除间隔 和旋转操作是安全的 开始。

【讨论】：

window.onload = function() 是个坏主意，它会阻止您从其他任何内容设置 onload 或删除任何其他“onload”。

@e-satis：为避免覆盖已附加到 window.onload 的钩子，请使用 jQuery 附加您的函数：$(window).load(function () );

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

@Andreas：很高兴了解 Load 函数。

【参考方案5】：

你试过了吗？

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

         your functions goes here !!!

); 

【讨论】：

那条评论和这条评论也是如此。 :o

【参考方案6】：

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

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

【讨论】：

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

不，只表示dom已经创建好了。

如果你真的需要等待页面加载完成，你可以这样做：$(window).load(function() //your code );

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