Загрузка больших фоновых изображений

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

Вот пример: http://bit.ly/1duLlYy

Мне кажется, что изображение загружается с помощью CSS. Но должен быть другой способ, которым они это делают, так как нет времени для загрузки. Это может быть глупо, но я не думаю, что это серверная сторона, иначе их Ссылка на изображение не была бы в CSS документ, не так ли?

Я был бы признателен за некоторые отзывы о лучших практиках для этого.

Спасибо.

3 2
javascript html css image-size

3 ответа:

Я предполагаю, что вы задаете этот вопрос, потому что вас удивило, что изображение не загрузилось "после" страницы?

Мой любимый трюк, чтобы предотвратить "МНПК" (вспышка пропадание стилей содержанием) является в base-64 кодирования таких изображений в CSS. По сути, это встраивание ваших изображений в CSS, и браузер не будет отображать страницу, пока не будет загружен весь CSS-файл.

Это приведет к тому, что ваш CSS-файл будет большим, а IE8 имеет ограничения на размер файла, но это действительно легко решение, если у вас есть процесс сборки или препроцессор CSS, как меньше.

2

Загрузка изображений невероятно сложна в html / css. На странице, на которую вы ссылаетесь, изображения на самом деле не столь высокого качества, как вы думаете, основываясь на размере файла. Они создают иллюзию, основанную на фоновом режиме.

Чтобы загрузить изображения, есть тонны трюков, если вы погуглите вокруг него:

  • кэширование-это ключ (не загружайте его несколько раз)
  • получить наименьший возможный размер файла
  • Используйте спрайты, когда это возможно-браузеры имеют только столько одновременных соединения
  • пример, который вы показали, отображал панель загрузки, которая скрывала время загрузки (используйте это экономно,это обоюдоострый меч в моем опыте).
  • порядок отображения управления
  • отложенный рендеринг
  • если только нужно поддерживать файлы html5 / css3 checkout svg.

Надеюсь, это поможет... к сожалению, волшебного ответа на ваш вопрос нет, все дело в компромиссах и в том, что использовать в вашем конкретном примере.

1

Это делается с помощью css. Они используют изображения в качестве фона, а затем применяют background-size: cover; к нему. Я часто использую это, когда делаю слайд-шоу на всю страницу. Качество изображения зависит от разрешения изображения. В этом случае его ширина 1600px.

0