Как предварительно загрузить изображения без Javascript? - PullRequest
Новая
       33

Как предварительно загрузить изображения без Javascript?

27 голосов
/ 04 мая 2009

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

Примечание: исправлено 5 изображений (не динамический)

Я не хочу использовать JavaScript для предварительной загрузки изображений, какие-либо решения?

Я не использую меню при наведении курсора или что-то в этом роде, но эти изображения являются изображениями продуктов, а ссылки являются текстовыми ссылками Понятно? ?? 1013 *

Ответы [ 9 ]

40 голосов
/ 16 сентября 2013

HTML5 имеет новый способ сделать это, link prefetching. 

<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

Просто добавьте много тегов link, сколько вам нужно в вашем HTML, и все готово. Конечно, старые браузеры не будут загружать контент таким образом.

Примечание Выше код не будет работать для Apple Safari Safari не поддерживает предварительную выборку до версии 12 https://caniuse.com/#search=prefetch

UPDATE

Если ваш сервер обслуживается с помощью HTTP2, вы также можете добавить в свой ответ заголовок Link и использовать HTTP2 Server Push . 

Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;
36 голосов
/ 04 мая 2009

Нет необходимости предварительно загружать изображения. Я не могу понять, почему 99% людей думают, что эффекты наведения должны использовать 2 изображения. В этом нет необходимости, а использование двух изображений делает его плохим. Единственное хорошее решение, которое я знаю, - это использовать CSS для элементов A (или простой JS для всех остальных кнопок). Когда кнопка нас зависла, установите background-position для некоторого смещения. 

a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }

Вот и все, используемое изображение вы можете увидеть ниже:

alt text
(источник: margonem.pl )

Редактировать: Вы также можете использовать его по-другому. Вместо того, чтобы переключать изображение, вы можете скрыть свое изображение. Таким образом, отправной точкой будет «background-position: 0 -100px» и при наведении курсора «0 0».

Эта техника называется CSS-спрайтами - вот хорошее описание: http://css -tricks.com / css-sprites /

31 голосов
/ 04 мая 2009

С http://snipplr.com/view/2122/css-image-preloader

Низкотехнологичная, но полезная техника, использующая только CSS. Поместив CSS в таблицу стилей, вставьте ее чуть ниже тега body вашей страницы: всякий раз, когда на ваши страницы ссылаются изображения, они теперь будут загружаться из кэша. 

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}
12 голосов
/ 08 июля 2012

Техника, о которой я пока не упомянул, которая отлично работает, если вам не нужно беспокоиться о IE6 и 7, - это использование псевдо-селектора :after, чтобы добавить ваши изображения как content в элемент на странице. Код ниже взят из этой статьи : 

body:after {
    content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
    display: none;
}

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

10 голосов
/ 04 мая 2009

Вы можете использовать скрытый div для вставки изображений. Например, 

<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
    <img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>

Это работает только для изображений, т.е. если вы попытаетесь сделать то же самое для файлов .swf, то возникнут проблемы. Firefox не запускает файл .swf, если он не виден.

3 голосов
/ 04 мая 2009

Ссылка на ваши изображения в невидимых тегах img. при загрузке страницы они тоже будут загружены.

2 голосов
/ 21 апреля 2017

Если вам нужна предварительная загрузка изображений, то вам нужна производительность. Я сомневаюсь, что вам нужно заблокировать страницу, пока загружаются ресурсы. ТАК, просто поместите некоторые ссылки предварительной выборки в конце тела и добавьте к ним фальшивые носители, чтобы они выглядели неважно (чтобы они загружались после всего остального). Затем добавьте тег onload к этим ссылкам, и в этой загрузке будет код, который устанавливает источник фактического ресурса на вашей странице. Например, это может даже использоваться в сочетании с динамическими фреймами.

До: 

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'">
    Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>

После того, как: 

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
    Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
      onload="myFrame.src=this.href" media="bogus" />

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

2 голосов
/ 04 мая 2009

Поскольку я не уверен, загружены ли скрытые изображения, вы, вероятно, захотите использовать спрайты изображений . Затем все изображение загружается, прежде чем что-либо отображается. Вы даже можете поместить все свои пункты меню в одно изображение и, следовательно, сохранить множество HTTP-запросов.

1 голос
/ 04 мая 2009

Разве вы не можете добавить их в качестве тега <img /> на свою страницу и скрыть их с помощью css?

...