[英]Properly loading scripts and dependencies in correct order using head.js?
我不确定我是否在正确使用head.js。 在我的html文档的标题中,我通过以下方式调用head.js文件:
<script src="/scripts/head.min.js" type="text/javascript"></script>
然后在html页面中的</ body>标记之前,我调用以下文件:
<script src="/scripts/load.js" type="text/javascript"></script>
在load.js文件中,我有以下代码:
head.js(
{livechat: "/scripts/livechat.js"},
{jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"},
{jquerytools: "http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"},
{slider: "/scripts/jquery.nivo.slider.pack.js"},
{prettyphoto: "/scripts/jquery.prettyPhoto.js"},
{sliderfunctions: "/scripts/slidercode.js"},
{functions: "/scripts/functions.js"}
);
上面的代码是否导致javascript文件按照列出的确切顺序执行,或者有时会不按顺序执行?
我问是因为滑块最初仅在我使用load.js中的以下代码时才起作用:
head.ready("slider", function() {
$('#slider').nivoSlider({
effect:'sliceDown',
controlNav: false
});
});
我可以通过将上面的代码移动到名为slidercode.js的外部文件来解决此问题,该文件包含以下代码:
$(window).load(function() {
$('#slider').nivoSlider({
effect:'sliceDown',
controlNav: false
});
});
但是我不确定是否要以正确,最有效的方式进行操作,因为这是我第一次使用head.js。 基本上从loader.js中的javascript文件中,我需要确保:
您应该这样调用脚本:(也删除http,也不需要。同样,jQuery总是首先加载所有脚本。在这种情况下,headJS优先,然后是jquery,然后是所有脚本)
<script src="/scripts/head.min.js" type="text/javascript"></script>
// this loads asyncrounously & in parallel
head.load("//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js", "//cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js", "/scripts/jquery.nivo.slider.pack.js", "/scripts/jquery.prettyPhoto.js", "/scripts/slidercode.js", "/scripts/functions.js");
然后在html页面中的</ body>标记之前,我调用以下文件:
<script>
head.ready(function () {
// some callback stuff
$('#slider').nivoSlider({
effect:'sliceDown',
controlNav: false
});
});
<script>
上面的代码是否导致javascript文件按照列出的确切顺序执行,或者有时会不按顺序执行?
是的,它们加载了asyn,但是按顺序执行。
我认为head.ready("slider", function() {} );
即使将其放置在load.js
之外,它也应该load.js
。 尝试在load.js脚本块之后添加它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.