Как заставить браузер (IE и Chrome) запрашивать изображения перед скриптами?
Примечание: Если вы читаете это в первый раз, вы можете сразу перейти к ОБНОВЛЕНИЮ, поскольку оно более точно решает проблему.
Итак, я получил веб-страницу.
В голове у меня есть фоновое изображение CSS:
Внизу страницы я загружаю свои скрипты:
Поскольку скрипты расположены внизу страницы, и CSS вверху страницы, я предполагал, что браузеры сначала загрузят изображение. Однако, похоже, это не так.
Это снимок экрана из инструментов разработчика Chrome:
http://www.vidasp.net/media/cssimg-vs-script.png
Как видите, изображение загружается после сценариев.
(Вертикальная синяя линия - это событие загрузки страницы DOMContentLoaded. Огромный промежуток в 45 мс - это время, в течение которого Chrome анализирует исходный код jQuery.)
Теперь мой первый вопрос:
Это стандартное поведение в браузерах? Всегда ли фоновые изображения CSS загружаются после всех скриптов на странице?
Если да, как я могу убедиться, что эти изображения загружаются перед скриптами? Есть ли простое и удобное решение этой проблемы?
ОБНОВЛЕНИЕ
Я сделал тестовый пример. Это исходный код HTML:
Как видите, у меня есть одно фоновое изображение CSS, одно обычное изображение и два сценария. А теперь результаты:
INTERNET EXPLORER (9 beta)
http://www.vidasp.net/media/loadorder-results/ie2.png
http://www.vidasp.net/media /loadorder-results/ie1.png
Internet Explorer сначала запрашивает обычное изображение, затем два скрипта и последнее изображение CSS .
FIREFOX (3.6)
http://www.vidasp.net/media/loadorder-results/firefox2.png
http : //www.vidasp.net/media/loadorder-results/firefox1.png
Firefox делает все правильно. Все ресурсы запрашиваются в том порядке, в котором они указаны в исходном коде HTML.
CHROME (последняя стабильная версия)
http://www.vidasp.net/media/loadorder-results/chrome2.png
http://www.vidasp.net/media/loadorder-results/chrome1.png
Chrome демонстрирует проблему, которая заставила меня написать этот вопрос. Скрипты запрашиваются перед изображениями.
OPERA (11)
http://www.vidasp.net/media/loadorder-results/opera1.png
http://www.vidasp.net/media/loadorder-results/opera2. png
Как и Firefox, Opera тоже делает это правильно . изображения перед скриптами?