Как заставить браузер (IE и Chrome) запрашивать изображения перед скриптами? - PullRequest
Новая
       10

Как заставить браузер (IE и Chrome) запрашивать изображения перед скриптами?

18 голосов
/ 20 января 2011

Примечание: Если вы читаете это в первый раз, вы можете сразу перейти к ОБНОВЛЕНИЮ, поскольку это более точно решает проблему.

Итак, я получил веб-страницу.

В голове у меня есть CSS background-image: 

<style>
    #foo { background-image:url(foo.gif); }
</style>

Внизу страницы я загружаю свои скрипты: 

<script src="jquery.js"></script>
<script src="analytics.js"></script>

Поскольку сценарии расположены внизу страницы, а CSS - вверху страницы, я предположил, что браузеры сначала загрузят изображение. Однако, похоже, что это не так.

Это скриншот из Chrome Dev Tools:

http://www.vidasp.net/media/cssimg-vs-script.png

Как видите, изображение загружается после сценариев. (Вертикальная синяя линия - это событие загрузки страницы DOMContentLoaded. Огромный разрыв в 45 мс - это время, в которое Chrome анализирует исходный код jQuery.)

Теперь мой первый вопрос:

Это стандартное поведение в браузерах? Всегда ли CSS background-images загружаются после всех скриптов на странице?

Если да, как я могу убедиться, что эти изображения загружаются перед сценариями? Есть ли простое и удобное решение этой проблемы?

ОБНОВЛЕНИЕ

Я сделал контрольный пример. Это исходный код HTML: 

<!DOCTYPE html>
<html>
<head>
    <style> body { background-image: url(image1.jpg) } </style>
</head>
<body>
    <div> <img src="image2.jpg"> </div>
    <script src="http://ajax.googleapis.com/ajax/.../jquery.min.js"></script>
    <script src="http://vidasp.net/js/tablesorter.js"></script>
</body>
</html>

Как видите, у меня есть одно CSS-фоновое изображение, одно обычное изображение и два скрипта. А теперь результаты:

INTERNET EXPLORER (9 бета)

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.

ХРОМ (последняя стабильная версия)

http://www.vidasp.net/media/loadorder-results/chrome2.png
http://www.vidasp.net/media/loadorder-results/chrome1.png

Chrome демонстрирует проблему, которая заставила меня написать этот вопрос в первую очередь. Сценарии запрашиваются перед изображениями.

ОПЕРА (11)

http://www.vidasp.net/media/loadorder-results/opera1.png
http://www.vidasp.net/media/loadorder-results/opera2.png

Как и Firefox, Opera тоже делает все правильно . :D

Подводя итог:

  • Firefox и Opera запрашивают ресурсы по мере их появления в исходном коде.

Исключения, поэтому это правило:

  • Internet Explorer запрашивает CSS background-images последний
  • Chrome запрашивает сценарии перед изображениями, даже если сценарии появляются позже в исходном коде

Теперь, когда я изложил проблему, позвольте мне перейти к моему вопросу:

Как заставить IE и Chrome запрашивать изображения перед сценариями?

Ответы [ 5 ]

3 голосов
/ 20 января 2011

Большинство современных браузеров с такой непредсказуемой параллельной предварительной загрузкой материалов в наши дни по соображениям производительности и, в основном, разрушают любые шансы на создание заказа на загрузку компонентов. Это, конечно, происходит после полной загрузки DOM. Та же история, что и при отложенной загрузке изображений JQuery , которая была прервана на некоторое время.

2 голосов
/ 11 октября 2016

Использование возможностей предварительной загрузки изображения с помощью атрибута rel = "preload" 

<link rel="preload" href="images/mypic.jpg" as="image">

Атрибут as указывает тип объекта, который должен ожидать браузер.Таким образом, это добавляет наивысшие приоритеты среди всех изображений, которые вы загружаете на страницу, но не меняет приоритет «JS -> Изображение» 

<link rel="preload" href="images/mypic.jpg">

Объявление без как позволяет предварительно загружать изображения даже до загрузки js,увеличение приоритета загрузки изображения.

Функция предварительной загрузки

2 голосов
/ 19 апреля 2011

Мы решили эту проблему, используя .load внутри вызова .ready jquery

что-то вроде: 

jQuery(document).ready(function($){
  jQuery('#my_container img').load(function($){
     /* SCRIPT */
  });
});
2 голосов
/ 20 января 2011

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

2 голосов
/ 20 января 2011

Учтите, что браузер ничего не может сделать, пока не соберет DOM.Поэтому сначала он анализирует всю страницу, затем загружает изображения (даже если они из CSS).

Вы можете загрузить изображения в сегменты DATA, встроенные в CSS илистраница, которая может ускорить эти вещи, или вы могли бы вставить ссылку jQuery после загрузки страницы (скажем, установить таймер на 500 мс), но, очевидно, это в некоторой степени повлияет на удобство использования.

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

http://en.wikipedia.org/wiki/Data_URI_scheme

Если SO не удалит его, между ним и кодом должна стоять красная точка: \ 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4Tzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Так вот что я имел в виду, используйте схему DATA URI

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...