Порядок загрузки изображений в html и css

Question

Могу ли я программно (или, как мы говорим о html и css, семантически) решить, в каком порядке должны загружаться изображения?

Я хочу сначала загрузить фоновое изображение, а затем вызвать som javascript на $(window).load, достаточно ли оставить его в браузере (например, body-background находится в строке 40, другие изображения позже в файле css) или я должен использовать JavaScript (и если да, есть ли какое-то простое решение?)

Спасибо.

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

Answer 1

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

Почти все внешние ресурсы (одним из исключений являются скрипты) страницы загружаются асинхронно, начиная с того момента, когда они анализируются браузером. Это означает, что, скорее всего, сначала будут загружаться файлы меньшего размера, а для загрузки и отображения больших файлов требуется больше времени.

Возможно, вам удастся спрайт всех меньших изображений в одном изображении, что увеличит размер файла, чтобы они все отображались одновременно (а не последовательно), но я не искренне рекомендую его для любой нормальной страницы. Процесс просто включал настройку положения фона, чтобы показывать только изображение, которое вы хотите из коллекции. Если размер коллекции больше, чем фоновое изображение, а фоновое изображение начинает загружаться первым, есть большая вероятность, что фон будет отображаться раньше изображений.

Answer 2

Я считаю, что это эффективный трюк:

1. Предварительно загрузите ваше изображение с помощью JS, который вы поместили на ранней стадии DOM:

   <script type="text/javascript">
       (new Image()).src="../img/loader.gif";
   </script>
   

2. Поместите элемент, который вы хотите загрузить первым, как можно выше в CSS

3. Загрузите ваш CSS как можно раньше, поместив его выше в DOM

Answer 3

Вы можете использовать событие onload на первом изображении для загрузки следующих) и т. Д.

img1.src = 'url1';
img1.onload = function(){
  ...
  img2.src = 'url2';
  img2.onload = function(){
    ...
  }
}

Answer 4

Как насчет динамической загрузки изображений с использованием JavaScript? Тогда вы можете быть уверены, какой заказ он загружен. Убедитесь, что скрипт загружен первым.

Answer 5

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

О, и событие onload для всего документа запускается после загрузки ВСЕХ ресурсов.