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

Question

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

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

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

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

Спасибо.

Answer 1

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

Мой любимый трюк, чтобы предотвратить «FOUC» (Flash Of Unstyled ontent), - это кодирование таких изображений в base-64 в ваш CSS. По сути, это вложение ваших изображений в ваш CSS, и браузер не будет отображать страницу до тех пор, пока не будет загружен весь файл CSS.

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

Answer 2

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

Для загрузки изображений, хотя, есть тонны трюков, если вы Google вокруг на нем:

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

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

Answer 3

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