動態加載腳本時結構javascript和延遲執行

我正在使用Modernizr.load()加載我的JavaScript文件。現在讓我們說每個頁面在加載完成後需要調用他們自己的init方法。但是我把加載放在一個模板主模板中，而模板主模板並不知道子頁面。頁面如何知道依賴關係何時完成加載？動態加載腳本時結構javascript和延遲執行

腳本

Page1Stuff= { 
    init: function(){ alert('page 1 executed'); } 
} 
Page2Stuff= { 
    init: function(){ alert('page 2 executed'); } 
}

網站主模板

//Modernizr loads the script. 
Modernizr.load([{ 
    load: 'jquery.js', 
}, 
{ 
    load: 'script.js' 
}]);

第1頁

$(function() { 
    Page1Stuff.init(); 
});

第2頁

$(function() { 
    Page2Stuff.init(); 
});

我想我在這裏看到2個問題。如果modernizr仍在加載jquery，可能不會定義$。而且，Page2Stuff或Page1Stuff可能未被定義。

來源

2011-07-24 Shawn Mclean

檢查http://www.modernizr.com/docs/#load'完成'回調 – spacevillain

@spacevillain，我意識到這一點，但我怎麼讓我所有的'我的頁面'知道這一點？ –

檢查Modernizr對象，也許它存儲加載的東西（如果沒有，你可以爲你自己創建簡單的json）。因此，請在每個「頁面」上檢查它，如果沒有找到需要的東西，請求Modernizr加載它。 – spacevillain

在您的模板中：使用modernizer「complete」回調來發出自定義事件以指示加載完成，同時設置一個全局變量，表示腳本已被加載。

在頁面腳本中：首先檢查全局變量，看看是否所有腳本都已加載，如果沒有，則註冊一個處理程序以偵聽加載完成時發出的自定義事件。

在你的模板代碼：

// A simple object that calls its listeners when modernizer script loading completes. 
global_scriptLoadingMonitor = (function() { 
    var listeners = []; 
    var isComplete = false; 
    return { 
     "addListener": function (listener) { 
     listeners[listeners.length] = listener; 
     }, 
     "complete": function() { 
     isComplete = true; 
     for (var i = listeners.length - 1; i >= 0; i--) { 
      listeners[i](); 
     } 
     }, 
     "isComplete": isComplete 
    } 
})(); 

Modernizr.load([{ 
    load: 'jquery.js', 
}, 
{ 
    load: 'script.js' 
    complete: function() { 
    { 
     global_scriptLoadingMonitor.complete(); 
    } 
}]);

現在，在您第1頁做到這一點：

if (global_scriptLoadingMonitor.isComplete) { 
    $(function() { 
     Page1Stuff.init(); 
    }); 
} else { 
    global_scriptLoadingMonitor.addListener(function() { 
     $(function() { 
      Page1Stuff.init(); 
     }); 
    }); 
}

，類似的還有第2頁。

來源

2011-07-24 12:51:38

你可以給我一個註冊事件處理程序listn的例子嗎？ –

在那裏，用一個簡單的例子編輯 –

動態加載腳本時結構javascript和延遲執行

回答

相關問題