Шаблон проектирования управления ресурсами JavaScript - PullRequest
2 голосов
/ 15 мая 2010

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

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

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

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

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

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

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

  5. Показывать полезную информацию в качестве справки при загрузке полного пользовательского интерфейса. (Что-то похожее на Gmail Inbox Preview и т. Д.)

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

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

1 Ответ

2 голосов
/ 15 мая 2010

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

  • Объедините все ваши активы JS и CSS, чтобы каждый мог выполнять только один запрос.
    • Существует множество способов сделать это, и существует множество упаковщиков ресурсов для каждой веб-инфраструктуры
  • Сначала убедитесь, что ваш макет CSS обработан
  • Минимизируйте количество изображений на вашем сайте. Комбинирование вещей и использование CSS-спрайтов очень помогает
  • Если этого по-прежнему недостаточно, вы можете поместить макет и размер CSS в HTML-файл, чтобы браузер сначала обработал его до связанного CSS
...