[英]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.