$(document）.ready 或 window.onload 用于隐藏/显示视频

$(document).ready or window.onload for hiding/showing a video

本文关键字：隐藏 用于 显示 视频 onload window document ready      更新时间：2023-09-26

我正在运行一个脚本(hack(来欺骗Safari在响应式页面上正确调整视频的大小。下面的脚本等待片刻，然后隐藏，然后显示一个视频，导致 Safari 意识到它应该将视频扩展到适当的大小。

我担心$(document).ready可能会过早触发脚本(即在加载视频之前(，从而导致脚本无法对视频执行应有的操作。是否有可能在$(document).ready脚本可能会触发，但由于视频在设置的毫秒后未加载，因此视频不会被隐藏/显示？

我应该使用window.onload(或其他方法？(来确保我的隐藏/显示尺寸技巧有效吗？

在我的测试中，该脚本大部分工作，即使在我清除缓存时重新加载时也是如此。但是有几次，当我在随机计算机上加载页面时，视频将无法正确调整大小，直到我重新加载页面。使用window.onload似乎不太理想，因为用户可能会在加载页面内容时注意到大小不正确的视频，或者在加载视频后看到黑客行为。 

<script><!-- Super hack to toggle display block/none which tricks Safari into properly sizing video-->
    $(document).ready(function() {
    $("#video1").delay(3000).hide(0, function() {
        $("#video1").delay(3500).show();
        });  
        });
 </script>

以下是这两个事件之间的区别：

  • window.onload在加载完所有内容(即媒体和样式表(后触发。这是一个 DOM 事件

  • $(document).ready()在加载HTML文档后触发(即最后一个结束标记已加载，媒体和样式表可能尚未加载(。这个事件在技术上是jQuery独有的，但是，如果aailiabe，jQuery实际上使用DOMContentLoaded DOM事件。

但是，jQuery确实有一个仅在加载所有媒体后触发的事件，$(document).load()，但是从1.8开始已弃用

如果您希望代码在视频加载之前运行，请使用$(document).ready()

如果您希望代码在视频加载后运行，请使用 window.onload 或 $(document).load()

要回答您的评论：

前提是视频在延迟结束时已加载 (总计到7.5 seconds(，您的黑客将起作用。

即使视频尚未加载，HTML 元素仍然存在，因此它 甚至可以在视频加载之前隐藏和显示(尽管我是 不确定黑客是否仍然有效，这取决于如何以及何时 Safari 决定视频的大小(。

显然，如果视频尚未加载，则隐藏和显示将不会加载 在视觉上更改任何内容，因为元素是空的/没有内容。

相关文章：