針對jQueryMobile優化代碼：僅在需要時才包含外部JS文件的問題

我正在爲移動應用程序使用jQueryMobile。很明顯，我希望UI加載非常快，但應用程序有多個工具，因此我只想在導航到的頁面上加載相關的外部JS庫。對於主應用程序（90％的頁面），我只需要jQueryMobile核心文件（即來自Google AJAX庫和jQueryMobile JS的最新jQuery核心CSS）。然而，對於剩下的10％，我需要啓用地理位置的Google地圖v3（所以Google Gears外部庫）和MarkerClusterer庫（我有> 400個標記，我只在需要時纔打印）。針對jQueryMobile優化代碼：僅在需要時才包含外部JS文件的問題

據我瞭解jQueryMobile是如何工作的（都是通過內部的AJAX請求），當應用程序初始化時，您的必須有具有用於整個應用程序加載的所有庫。這使得我的應用程序確實當用戶第一次請求移動網站（所有核心文件，加上所有的地圖/凝膠定位/標記集羣文件）時很沉重。我想避免這種情況發生，因爲它會嚇跑許多潛在用戶（尤其是當我的用戶中只有一部分用戶希望地理位置好時）。

我已經嘗試在相關頁面末尾（在頁腳div之前）加載Google Maps組件，並且還嘗試將它們放入相關頁面中的<標頭>標記中。但是，這兩個都無法初始化（使用附加到函數的console.log（）輸出進行檢查）。

是的，在你問之前，我正在使用「pagecreate」live（）函數，並且正在處理正確的div（如果我將與Google Maps相關的所有內容放入根頁頭標記中，）

我覺得這一定是一個很常見的問題：用jQueryMobile選擇性加載頁面組件。我無法通過Google在線查找任何內容 - 大多數jQueryMobile教程都是常見花園「Hello World！」。品種多，所以如果你有什麼可以提供的我全都是耳朵！鏈接到選擇性加載教程也歡迎！

在此先感謝！

來源

2011-05-23 tatlar

可能是您的良好來源：http：// jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-mobile-example.html?utm_source=twitterfeed&utm_medium=twitter – 2011-05-23 18:34:30

非常感謝Phill - 在我寫這篇文章之前，我已經對這些頁面進行了相當廣泛的搜索。除非我錯過了一些東西，否則所有這些頁面都會在每個*頁面上初始化所有必需的庫。 – tatlar 2011-05-23 18:41:13

所有這些頁面都會初始化每個頁面上所有必需的庫。

是的，這是默認的方式來做到這一點，所以無論用戶首先調用頁面/子頁面 - 一切正常。所有的庫工作正常，只能加載一次。但你可能知道。

假設您希望稍後加載一些庫，以便即使用戶不需要它們時也不會減慢整個應用程序的速度，您應該強制它們僅加載正確的頁面。

這可以通過一些不同的方式來實現：

最簡單的：把它放在頭上，阿西這是福斯特頁是開放的，並在所有鏈接到子頁面放rel="external"。它顯然會重新加載頁面，並讓你失去JQM緩存頁面的一些優點，但加載庫的時間可能是值得的
建議：JQM應該加載並運行JS時，它被放在page股利。它未能爲你工作的原因可能是lib取決於事件，你可能不得不爲它啓動它。但是，如果你只是觸發事件，它將使一切（包括JQM）處理它。你必須讓它只觸發圖書館。要做到這一點，你需要：
- 編輯代碼，找到事件處理函數
- 更改代碼，以便該函數有一個全局訪問的名稱
- 中的呼叫pagesomething處理功能

另外：如果您遇到網頁問題，請嘗試綁定到pageshow而不是pagecreate，以查看是否需要某些元素首先可見。

來源

2011-05-24 07:02:24 naugtur

謝謝naugtur - 那給了我一些東西咀嚼。如果這能解決我的問題，請在此頁面添加評論。多謝。 – tatlar 2011-05-24 15:26:43

好問題！我在jQuery Mobile文檔中沒有看到這一點。繼naugtur我想說你的網頁DIV中像這樣

<script> 
if(typeof MyFunction == "undefined") { 
    $.getScript('myfunction.js', function() { 
     // initialize if necessary 
    }); 
} 
</script>

如果要加載的東西，其谷歌服務，特別是如果有多個文件時，jsload是一個不錯的選擇。

來源

2011-05-24 09:05:51

甜 - 謝謝蒂姆！我之前沒有見過JsLoad。我可以在這個和不同的網站上的多個領域使用它 - 很棒的提示。 – tatlar 2011-05-24 15:25:10

希望谷歌圖書館不依賴於domready。我真的不知道。 – naugtur 2011-05-24 20:45:39

問題，你是否試圖使用head.js方法來解決問題？他們將js文件設置爲加載爲暢通的請求，就像圖像在瀏覽器中加載的方式，而不是默認瀏覽器一次加載一個js文件的方式，並阻止其他js加載

來源

2011-11-25 22:21:30

針對jQueryMobile優化代碼：僅在需要時才包含外部JS文件的問題

回答

相關問題