Как веб-разработчик, я часто сталкиваюсь с проблемой, когда жду, пока что-то загрузится, прежде чем делать что-то еще. В частности, я часто скрываю (используя display: none;
или visibility: hidden;
в зависимости от ситуации) элементы, ожидая загрузки фонового изображения или файла CSS.
Рассмотрим этот пример с Last.FM. Они накладывают полупрозрачный PNG на обложку каждого альбома, чтобы он выглядел так, как будто он находится внутри шкатулки для драгоценностей. Они позволяют ему загружаться при загрузке, поэтому, в зависимости от скорости вашего интернета, вы можете временно увидеть художественное изображение само по себе (без наложения). В этом случае обложка альбома выглядит нормально без эффекта шкатулки. Но в подобных ситуациях я обнаружил, что не хочу, чтобы пользователь видел искаженный дизайн сайта по мере постепенной загрузки ресурсов. Так вот, в редких случаях я скрывал все от пользователя, пока не загрузился весь комплект и кабуд. Но это часто сложно записать, и пользователь может довольно долго ждать, чтобы увидеть что-либо (кроме текста «загрузка...»).
Я могу придумать (и иногда использовал) некоторые очевидные решения/компромиссы:
Используйте встроенный CSS, чтобы при загрузке и отображении определенных частей DOM они сразу же имели правильный размер/положение/и т. д.
Немедленно визуализируйте навигационную часть сайта, чтобы, если пользователь хотел использовать текущую страницу исключительно для перехода в другое место, ему не нужно было ждать загрузки остальных.
Сначала загружайте пиксельные изображения в качестве заполнителей для макета, а затем загружайте более качественные изображения в качестве замены.
Что-нибудь причудливое, например, использование симпатичной анимированной гифки, чтобы отвлечь пользователя во время фазы «загрузки…».
Показать полезную информацию в качестве справки при загрузке полного пользовательского интерфейса. (что-то вроде предварительный просмотр папки "Входящие" Gmail, так далее.)
(Извините, если мой вопрос был просто задан и на него был дан ответ...)
Несмотря на все эти идеи, я все еще надеюсь, что есть лучшие способы сделать некоторые из этих вещей. Так что я думаю, что я ищу вдохновения и/или любых творческих способов решения этой проблемы, которые вы, ребята, могли видеть в дикой природе.
background
с анимированным gif (загрузить gif). Это, пожалуй, самый безболезненный способ. - person FK82   schedule 15.05.2010