javascript - 完成页面加载后开始预加载内容

Question

我正在尝试以这样一种方式进行预加载，即我希望预加载的组件在成功加载页面后开始加载。

例如，我有 index.php。我希望它完全加载。它一加载，我就想开始加载其他组件。

把事情说清楚。我有一个使用大尺寸图像的导航系统。如果我将它们与 index.php 文件一起加载，则会增加页面的加载时间。我希望在完全渲染 index.php 之后加载那些大图像？

我说的有道理吗？可能吗？

Answer 1

只需将您的预加载函数附加到窗口对象的“加载”事件。 Load 在页面(和所有外部资源)完全加载后触发。

这与 JQuery 等各种库提供的“DOMReady”事件不同(如 Ivo 的回答)。 $(document).ready(fn) 将在 DOM 准备就绪后触发(意味着已接收/解析完整的 http 文档)但不会等待外部资源(图像、css 等)下载。

相反，您需要 $(window).load():

<script type="text/javascript">
preLoadStuff = function(){
   //code that does preloading goes here
}

$(window).load(preLoadStuff);
</script>

这将在所有图像等完全加载后触发您的 preLoadStuff 处理程序。