Шаблон проектирования управления ресурсами JavaScript

Как веб-разработчик, я часто сталкиваюсь с проблемой, когда жду, пока что-то загрузится, прежде чем делать что-то еще. В частности, я часто скрываю (используя display: none; или visibility: hidden; в зависимости от ситуации) элементы, ожидая загрузки фонового изображения или файла CSS.

Рассмотрим этот пример с Last.FM. Они накладывают полупрозрачный PNG на обложку каждого альбома, чтобы он выглядел так, как будто он находится внутри шкатулки для драгоценностей. Они позволяют ему загружаться при загрузке, поэтому, в зависимости от скорости вашего интернета, вы можете временно увидеть художественное изображение само по себе (без наложения). В этом случае обложка альбома выглядит нормально без эффекта шкатулки. Но в подобных ситуациях я обнаружил, что не хочу, чтобы пользователь видел искаженный дизайн сайта по мере постепенной загрузки ресурсов. Так вот, в редких случаях я скрывал все от пользователя, пока не загрузился весь комплект и кабуд. Но это часто сложно записать, и пользователь может довольно долго ждать, чтобы увидеть что-либо (кроме текста «загрузка...»).

Я могу придумать (и иногда использовал) некоторые очевидные решения/компромиссы:

  1. Используйте встроенный CSS, чтобы при загрузке и отображении определенных частей DOM они сразу же имели правильный размер/положение/и т. д.

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

  3. Сначала загружайте пиксельные изображения в качестве заполнителей для макета, а затем загружайте более качественные изображения в качестве замены.

  4. Что-нибудь причудливое, например, использование симпатичной анимированной гифки, чтобы отвлечь пользователя во время фазы «загрузки…».

  5. Показать полезную информацию в качестве справки при загрузке полного пользовательского интерфейса. (что-то вроде предварительный просмотр папки "Входящие" Gmail, так далее.)

(Извините, если мой вопрос был просто задан и на него был дан ответ...)

Несмотря на все эти идеи, я все еще надеюсь, что есть лучшие способы сделать некоторые из этих вещей. Так что я думаю, что я ищу вдохновения и/или любых творческих способов решения этой проблемы, которые вы, ребята, могли видеть в дикой природе.


person Adam    schedule 14.05.2010    source источник
comment
Что касается изображений: используйте CSS, чтобы установить класс для изображений, которые имеют свойство background с анимированным gif (загрузить gif). Это, пожалуй, самый безболезненный способ.   -  person FK82    schedule 15.05.2010


Ответы (1)


Это распространенная проблема. Лучше всего оптимизировать сайт, чтобы он загружался быстрее. Попробуйте YSlow

  • Combine all your JS and CSS assets so there is only one request each.
    • There are numerous ways of doing this and a number of asset packagers exist for every web framework out there
  • Убедитесь, что ваш макет CSS обрабатывается первым
  • Сведите к минимуму количество изображений на своем сайте. Комбинирование вещей и использование спрайтов CSS очень помогает
  • Если этого все еще недостаточно, вы можете поместить свой макет и размер CSS в файл HTML, чтобы браузер сначала обработал его, а затем связанный CSS.
person Daniel Beardsley    schedule 14.05.2010
comment
Спасибо Даниэль! Упаковщики активов — отличный совет. Я забыл о тех. Что касается второй пули (убедитесь, что ваш макет CSS обрабатывается первым): для этого нужно будет скрывать элементы, ожидая загрузки CSS, не так ли? Четвертая пуля мне известна (упомянута в ответе). Хотя это очень хороший список, я все еще надеюсь получить от сообщества другие творческие идеи. - person Adam; 15.05.2010
comment
Не нужно что-то скрывать, просто убедитесь, что CSS-файл макета является первым загружаемым файлом CSS или что текст CSS в HEAD документа HTML не связан. Выполнение двух запросов к веб-серверу (html и css макета) или одного (html со встроенным css) должно быть очень быстрым. Если ваша страница загружается долго и перемещается во время загрузки, возможно, вы зависите от изображений для макета? - person Daniel Beardsley; 15.05.2010