Question

我正在努力使预加载工作的方式使我希望预加载的组件在成功加载页面后开始加载。

例如，

我有index.php。我希望它完全加载。加载后我想开始加载其他组件。

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

我有道理吗？有可能吗？

Answer 1

几乎与PHP程序执行并行加载图像。这实际上取决于执行PHP程序所需的时间，输出到浏览器的数据的速度传输等在处理index.php之后，你不应该尝试加载这些图像，这样做无济于事，因为你的服务器是处理PHP脚本的人，而浏览器是那个应该获取图像的人。

让您的PHP程序尽快输出图像标记是好的，并改善用户体验。

Answer 2

我认为您不了解网页的运作方式。 index.php文件将在任何HTML输出甚至开始处理之前执行它所需的一切，这只需要几毫秒。然后HTML将开始按照它在页面上显示的顺序加载所有内容。在显示任何内容之前，页面不会等待图像完成加载。它将显示到目前为止已加载的页面轮廓，并且当图像完成加载时，只需将它们插入正确的位置即可。听起来像你想要的东西已经是事情的运作方式。

Answer 3

只需将预加载功能附加到窗口对象的'load'事件即可。页面（和所有外部资源）完全加载后加载。

这与JQuery等各种库提供的“DOMReady”事件不同（如Ivo的答案）。一旦DOM准备好（意味着已经接收/解析了完整的http文档），$(document).ready(fn)将启动，但不等待外部资源（图像，css等）下载。

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

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

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

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

Answer 4

$(document).ready(function() { YOUR CODE HERE });

http://api.jquery.com/ready/

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

4 个答案: