Временное фоновое изображение во время загрузки большого?

Question

Есть ли способ, без javascript, загрузить маленькое изображение для фона перед загрузкой реального изображения? Без JavaScript, потому что я знаю, как это сделать.

Я не могу проверить, будет ли работать следующий CSS3, потому что он работает слишком быстро:

body { 
  background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}

Если tinypreload.jpg только, скажем, 20 КБ, а огромный файл_jpg 300 КБ - это выполнит задачу? Я предполагаю, что обе загрузки начнутся одновременно, а не будут последовательными.

Обновление

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

Если вы все еще хотите добиться этого эффекта - объедините все ваши «необходимые» изображения в 1 файл и отобразите их как обрезанный фон с правильным смещением. Загрузите изображения в высоком разрешении с помощью javascript и обновите содержимое позже.

Answer 1

Вы можете использовать порядок загрузки CSS и переопределения для достижения этого результата.

Попробуйте загрузить небольшое изображение из основного файла CSS, а затем поместите тег <style></style> в внизу html-страницы.Встроенный стиль переопределяет основной стиль, но загружается последним из-за своей позиции в коде.

Разница будет в миллисекундах, поэтому она может быть слишком быстрой.Это также взломано и приведет к некорректному, но работающему коду.Хотя стоит попробовать.

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

Эта статья о CSS3 множественных фонов также может помочь, так как вы можете использовать порядок наложения для достижения результата, который вам нужен

Было бы полезно узнать, какую проблему вы пытаетесь решить помимо порядка загрузки, так как трудно дать совет по этому вопросу.

Как я уже сказал в моем комментарии, вы можете использоватьвкладка «net» в firebug для firefox (называемая временной шкалой в chrome), чтобы увидеть фактический порядок загрузки на вашей странице - вы даже можете отфильтровать его (в firefox) только для CSS или только для изображений - это позволит вам проверить.*