1

我似乎无法在页面上的所有其他内容之前加载预加载器(查询加载器 2)。当我刷新页面时,全屏滑块显示中的图像会阻塞页面,然后查询加载器启动。有没有办法在页面上的所有其他内容之前启动预加载器?

我经常使用堆栈溢出,通常会找到我的问题的答案,但由于我对 javascript 的了解有限,这让我很难过。我尝试过的事情:将对 queryloader2 的调用放在页眉的页面顶部。将对滑块脚本的调用放在页面底部,以便它们在预加载器之后加载。将预加载器的 z-index 更改为高于滑块。jQuery.getScript() 按顺序加载脚本,但滑块仍显示在页面下方,然后预加载器启动。

我认为这与加载顺序有关,但如果您对我在这里做错了什么有任何想法,我们将不胜感激。

我已经放了一个指向我的网站的链接,因为我不知道在这里放哪一段代码,所以你可以看到预加载器和滑块加载错误的方式http://stavriaphotography.com

4

2 回答 2

2

该网站在外部脚本上非常繁重。以下是在浏览器中加载资源的工作原理:

图片是异步加载的,这意味着浏览器在继续向下DOM之前不会等待图片加载,但是

JavaScript是同步加载的,你不能在加载前一个之前加载下一个。

jQuery$(document).ready()函数仅在 DOM 完全加载时触发。

这是您网站上发生的事情:

您在头部加载 jQ 和 queryLoader 并准备在 DOM 准备好时调用它。页脚中的脚本需要时间来加载并延迟$(document).ready()函数调用。同时,您的正文中有图像,并且由于它们是异步加载的,因此浏览器在 queryLoader 准备好执行之前就开始加载它们。

在您的情况下,最简单的解决方案是将所有外部脚本移动到您的 html header,但这不是一个非常实用的解决方案。

我建议阅读一下 JavaScript 并将您的站点拆分为多个文件以加快加载速度。

一些提示:jQuery.ajax() 和 Handlebars.js,或者如果你真的想疯狂地潜入 Backbone.js 和 RequireJS 异步加载 javascript。

希望这可以帮助!

于 2014-03-26T09:31:34.387 回答
0

将 Jquery 库放在首位

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

然后添加你的其他 JS 文件

于 2014-03-26T07:14:49.847 回答