加载js文件的顺序

时间:2014-03-26 06:21:21

标签: javascript jquery load-order

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

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

我正在考虑将其与负载顺序相关联,但如果您对我在这里做错了什么有任何想法,我们将非常感谢您的帮助。

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

2 个答案:

答案 0 :(得分:2)

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

图像是异步加载的,这意味着浏览器不会等待图像加载,然后再继续沿着 DOM 继续加载

JavaScript 是同步加载的,您可以在加载上一个之前加载下一个。

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

以下是您网站上发生的事情:

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

  

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

我建议您阅读一些关于JavaScript的信息并将您的网站拆分为多个文件,以便加快加载速度。

一些指针:jQuery.ajax()和Handlebars.js或者如果你真的想疯狂地潜入Backbone.js并使用RequireJS进行异步javascript加载。

希望这有帮助!

答案 1 :(得分:0)

首先放置Jquery库

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

然后添加您的其他JS文件