Как заставить браузеры предварительно выбирать изображения в первых 6 параллельных соединениях

Я нашел много способов предварительной загрузки изображений как с помощью CSS, так и с помощью JS, но ни один из них не смог ДЕЙСТВИТЕЛЬНО предварительно загрузить изображения так, как мне нужно, или, точнее, в том порядке, который мне нужен.

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

К сожалению, это верно в моих тестах только с <img> элементами; для других элементов с чем-то вроде фоновых изображений это не совсем так, даже если изображения используются в качестве фона, например, для элемента <body>.

Единственное решение, которое работало так, как мне было нужно, — это поместить некоторые <img>elements сразу после <body>tag и установить их с помощью style="display:none". Это работает, но довольно уродливый и ужасно грубый способ добиться этого.

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

Я был очень очарован супер блестящим решением, которое я видел, чтобы предварительно загружать изображения с псевдоэлементом на теле, как это body:before, а затем использовать несколько фоновых изображений. Хотя этот метод действительно работает для предварительной загрузки, он не повлияет на приоритет порядка загрузки ... очень жаль, он такой идеальный! :(

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

ОБНОВЛЕНИЕ

Как я объясняю в комментариях ниже, меня не заботит загрузка изображений в определенном порядке, я хочу, чтобы они загружались ДО того, как большая часть ресурсов и другие элементы в «загрузке ", так что изображения будут отображаться почти мгновенно в браузере вместе с обычным рендерингом макета CSS при доступе к странице.

ОБНОВЛЕНИЕ 2

Дополнительная информация: термин «предварительная загрузка» действительно вводит в заблуждение, более близким термином для того, что я ищу, может быть «предварительная выборка», но в основном это выглядит так:

Большинство браузеров одновременно загружают 6 запросов параллельно, задерживая остальные загрузки. Если то, что вам «действительно» нужно, находится в этих 6 лучших, вам повезло, иначе это в следующих 6, или, может быть, в следующем и так далее.

То, что я пытаюсь сделать, это найти правильный способ сказать «Эй, сначала загрузите это, пожалуйста» и, в частности, «это изображение». Как указал @farkas в ответах ниже, rel="subresource" действительно хорошее начало, но, как указано здесь, он работает в основном как "[..]предполагает, что на самом деле загружается с более низким приоритетом, чем таблицы стилей/скрипты и шрифты, но с равный или более высокий приоритет, чем у изображений", так что он действительно будет загружаться первым, чем многие другие вещи, но все же нет правильного способа пробиться в эти 6 золотых первых мест.

загрузка сетевой диаграммы

Как видите, браузер сначала загрузил стили, ЗАТЕМ 1 изображение, которое мне нужно было загрузить как можно скорее, затем скрипты, опустив другие 2 изображения, которые мне нужно было загрузить с наивысшим приоритетом.

Следует отметить, что я разместил все свои скрипты не в шапке, все они размещены внизу перед закрытием </body>, а также (как указано в начале моего вопроса) я пометил свои изображения СРАЗУ ПОСЛЕ открытия <body>, но только dark-pattern.jpg были загружены первыми, остальные 2 были отложены

...
</head>
<body>
<img src="dark-pattern.jpg" style="display:none">
<img src="preloader.jpg" style="display:none">
<img src="xs-style.png" style="display:none">

.. rest of code 
...

Я хотел бы знать, как правильно сказать: «Пожалуйста, найдите место для моих фотографий, просто скачайте стили, сценарий может прийти позже».

Можно ли этого добиться?

Я также нашел более подробную информацию по этому вопросу здесь, но ничего по моему конкретному запросу, кроме rel="subresource"

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


javascript image css performance prefetch
person Gruber    schedule 14.05.2015    source источник
comment
@dandavis, как указано, это предварительно загрузит изображение, но не повлияет на порядок, в котором оно будет загружаться браузерами, попробуйте проверить в инструментах разработчика.   -  person Gruber    schedule 14.05.2015
comment
Ознакомьтесь с некоторыми подходами здесь: perishablepress.com/3 -ways-preload-images-css-javascript-ajax. Однако имейте в виду, что сборка мусора в браузере будет по-разному влиять на кэширование и загрузку. Даже если они предварительно загружены, некоторые браузеры и разные версии удаляют изображения, если они не используются или не отображаются в течение определенного периода времени. Я не нашел отличного решения для этой проблемы.   -  person Daved    schedule 14.05.2015
comment
О, и, как упоминает @dandavis, порядок загрузки должен быть процедурным. а, б, в и так далее. Однако это не будет контролировать, насколько быстро некоторые завершат процесс загрузки. Единственный способ сделать это - синхронная загрузка, и это не очень эффективно/эффективно.   -  person Daved    schedule 14.05.2015
comment
@Daved, это в основном моя точка зрения, меня не волнует загрузка изображений в определенном порядке, я хочу, чтобы они загружались ДО большей части активов и других элементов на диаграмме, чтобы изображения отображались почти мгновенно. внутри браузера вместе с обычным рендерингом макета CSS. Я укажу это также в моем вопросе лучше.   -  person Gruber    schedule 14.05.2015
comment
Я думаю, что единственный способ сделать это — отложить отображение диаграммы до тех пор, пока не будут загружены все изображения. Для этого вы должны прикрепить обработчик нагрузки к каждому из них, а когда все будет готово, отобразить свою диаграмму.   -  person Daved    schedule 14.05.2015
comment
о, тогда скрытые жестко закодированные изображения - лучший (единственный?) вариант (теперь, когда я вижу, что вы хотите сделать)   -  person dandavis    schedule 14.05.2015
comment
Попробуйте использовать <script defer="" src="src.js"></script>   -  person alexander farkas    schedule 22.05.2015

Ответы (2)


arrow_upward
4
arrow_downward

Загрузка изображений с использованием CSS или JS всегда будет медленнее, чем с использованием HTML. Это связано с тем, что CSS и JS загружаются и анализируются после HTML. Кроме того, браузер оптимизирует это с помощью спекулятивного анализатора предварительной загрузки.

Поэтому, если ваши изображения уже находятся в формате HTML, вы не будете изменять порядок загрузки img, если добавите сценарий предварительной загрузки для этих изображений.

Поэтому у вас есть в основном два варианта:

  1. Загружайте изображения как можно скорее, добавляя их вверху (либо со скрытым img, либо с помощью link rel="subresource" (только для Chrome)
  2. Задержка загрузки всех остальных неважных ресурсов с помощью отложенного загрузчика
person alexander farkas    schedule 17.05.2015
comment
Спасибо за ваш ответ и извините за мой поздний ответ. Это моя точная точка зрения, и я предполагаю, что термин «предварительная загрузка» действительно сбивает с толку, возможно, «предварительная выборка» является более подходящим термином, я снова обновлю свой вопрос по этому вопросу. Атрибут subresource очень интересен. . Пожалуйста, проверьте мое 2 обновление, если хотите, спасибо! - person Gruber; 20.05.2015

arrow_upward
3
arrow_downward

Попробуй это:

var all = ['img1.jpg','img2.jpg'];
function onAllImagesLoaded() { alert('loaded!'); }
function preload() {
    var i = new Image();
    var src= all.pop();
    if (!src) {
         onAllImagesLoaded();
         return;
    }
    i.src = src; 
    i.onload = preload;
}
preload();

Есть некоторые проблемы с кэшированными изображениями в IE, иногда он может пропускать onload вызов кэшированных ресурсов.

Изменить

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

http://imagesloaded.desandro.com/

person kreig    schedule 14.05.2015
comment
Это предварительно загружает изображения, но не отвечает на вопрос ОП о том, как дождаться загрузки всех изображений для отображения диаграммы или раздела. - person Daved; 14.05.2015
comment
Ты прав, Дэйв. Я добавил обратный вызов onAllImagesLoaded(). - person kreig; 14.05.2015
comment
Похоже, интересный плагин вы связали. Хорошая редакция поста. Единственная корректировка, которую я бы предложил, - это асинхронная загрузка их всех. Своим редактированием + комментарием он указывает, что больше заботится о том, чтобы они все были загружены. - person Daved; 14.05.2015
comment
Спасибо за ваш ответ и извините за мой поздний ответ. К сожалению, это все еще не то, что мне нужно, пожалуйста, проверьте мое 2 обновление, если хотите. - person Gruber; 20.05.2015