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

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

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

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

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

Ответы

Ответ 1

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

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

#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();

}

Ответ 2

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

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

Что все, изображение, которое вы можете увидеть ниже:

alt text http://www.margonem.pl/img/b_tagsdesc.png

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

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

Ответ 3

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

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

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

UPDATE

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

Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;

Ответ 4

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

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

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

Ответ 5

Вы можете использовать скрытый 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 файл, если он не отображается.

Ответ 6

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

Ответ 7

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

Ответ 8

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

Перед

<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>

Ответ 9

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