IPad Web App.Javascript, загрузить весь контент или переключить страницу?

Question

Мы работаем над прототипом веб-приложения, ориентированного на IPAD. Мы широко использовали HTML5, и приложение работает хорошо.

Часть требования заключается в том, чтобы приложение могло переключаться между «страницами» в плавном движении, как в собственном приложении.

Итак, одно из наших предложений - изменить работу веб-приложения. В настоящее время приложение работает во многом как обычный веб-сайт, что создает проблемы при переходе на страницы с большими изображениями или анимацией (поскольку они загружаются при переключении страницы).

Рекомендуется ли изменить наше приложение так, чтобы домашняя страница просто перетаскивала новый контент (через AJAX) и соответственно манипулировала страницей, создавая, таким образом, так называемое одностраничное приложение. Уменьшить количество и размер http запросов?

Если это так, и мы хотим загрузить контент через AJAX, как мы можем быть уверены, что после того, как мы перетащили контент, загрузилось каждое из изображений на странице. Это позволит нам использовать простой значок загрузки во время перехода.

Answer 1

Рекомендуется ли изменить наше приложение таким образом, чтобы домашняя страница просто перетаскивала новый контент (через AJAX) и соответственно манипулировала страницей, создавая, таким образом, так называемое одностраничное приложение. Уменьшить количество и размер http запросов?

В одностраничном приложении (SPA) количество запросов не может быть уменьшено, но их размер может быть, т.к. вам придется загружать свои сценарии и просматривать только один раз, а затем просто обновлять соответствующие части стр. (Конечно, многостраничный дизайн также может значительно улучшить скорость благодаря тщательно сконструированным заголовкам управления кэшем). Одним из преимуществ парадигмы SPA является то, что вы можете загружать несколько страниц во время начальной загрузки приложения и показывать их при необходимости. Таким образом, вы можете компенсировать некоторую задержку в начальной загрузке для более удобного взаимодействия с пользователем при последующих изменениях страницы - сохраняя себя для поездки на сервер, даже если это «поездка AJAX». Это компромисс, который я обычно люблю делать в SPA.

Если это так, и мы хотим загрузить контент через AJAX, как мы можем быть уверены, что после того, как мы перетащили контент, загрузилось каждое из изображений на странице. Если изображения достаточно малы, альтернативой является использование изображений в кодировке Base-64, это гарантирует, что весь контент готов к одновременному отображению.

Вы можете прикрепить содержимое к dom в контейнере, но скрыть его. Показать контейнер после того, как все события загрузки изображений были запущены. Если вы используете jQuery, плагин, который помогает в этом: https://github.com/alexanderdickson/waitForImages. Если вы используете чистый JS, вам, вероятно, придется развернуть собственное решение, которое будет включать:

1. перебрать все изображения в контейнере,
2. хранит счетчик количества изображений (numImages) и инициализирует счетчик (numLoaded), который подсчитывает количество загруженных изображений, и
3. привязка к событию load каждого изображения, так что при его запуске счетчик numLoaded увеличивается, а
4. проверка numLoaded == numImages. Если значение равно true, все изображения загружены и контейнер может быть отображен.