IPad Web App。 Javascript，加載所有內容或切換頁面？

Question

我們正在研究針對IPAD的原型Web應用程序。我們已經很好地使用了HTML5，並且該應用程序運行良好。

部分要求是允許應用程序在流動中像「原生」應用程序一樣在「頁面」之間切換。

所以我們的建議之一是改變網絡應用程序的工作方式。目前該應用程序的工作方式與普通網站非常相似，這會在切換到具有大圖像或動畫的頁面時出現問題（因爲它們在頁面切換時加載）。

是否建議更改我們的應用程序，以便主頁拖動新內容（通過AJAX）並相應地操作頁面，從而創建一個所謂的單頁應用程序。減少http請求的數量和大小？

如果是這種情況，我們希望通過AJAX加載內容，我們如何確保一旦拖動了內容，頁面上的每個圖像都已加載。這將允許我們在轉換髮生時使用簡單的加載圖標。

Answer 1

它是建議改變我們的應用程序等什麼主頁只需拖動新的內容（通過AJAX），並相應地操縱頁面，因此形成了所謂的單頁的應用程序。減少http請求的數量和大小？

在單頁應用（SPA），請求的數量可能不會減少，但它們的大小而定，B/C，你將不得不加載腳本和查看一次，然後就更新相關頁面的一部分。 （當然，多頁設計也可以通過仔細構建的緩存控制標頭來顯着提高速度）。 SPA範例的一個好處是，您可以在初始應用程序加載期間加載多個頁面，並在必要時顯示它們。因此，您可以在初始加載時權衡一些延遲，以便在隨後的頁面更改中獲得更快捷的用戶體驗 - 即使它是「AJAX旅程」，也可以節省自己到服務器的旅程。這是我通常喜歡在SPA中做出的折衷。

如果是這種情況，我們希望通過AJAX加載內容，我們如何確保一旦我們拖動了內容，頁面上的每個圖像都已加載。 如果圖像足夠小，另一種方法是使用base-64編碼圖像，這將保證所有內容都可以同時顯示。

您可以將內容附加到容器中的dom，但隱藏它。所有圖像的「加載」事件觸發後顯示容器。如果你使用jQuery，一個可以幫助你的插件是https://github.com/alexanderdickson/waitForImages。如果您使用純JS，你可能不得不推出自己的解決方案，這將涉及：

1. 迭代在容器中的所有圖像，
2. 存儲的圖像數量的計數（numImages ）及初始化計數器（numLoaded），該吻合加載的圖像的數量，並且
3. 綁定到每個圖像的「負載」事件，使得當其觸發時，numLoaded計數器被遞增，而
4. 檢查是否numLoaded == numImages。如果爲true，則所有圖像都已加載並且可以顯示容器。