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

Question

我正在运行一个脚本（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>

Answer 1

这是两个事件的区别：

• 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 决定视频的大小）。

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