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

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

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

Я не использую меню Hover или что-то в этом роде, но это изображения Изображения продуктов и ссылки Текстовая ссылка Got my Point ??

источник

2009-05-04 Wasim Shaikh

@tharkun, как это дубликат. Это «с»; это «без». –

woa, мой плохой! steretypes! Прости! – markus

см. Http://stackoverflow.com/q/1373142/104380 – vsync

От 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(); 

}

источник

2009-05-04 11:56:53

Большое спасибо AZIZ. Это действительно хорошее решение для Preload. Все еще надеется на большее количество решений. Затем закройте Ответ, –

+13

, этот САМЫЙ ОПРЕДЕЛЕННО не работает. обрабатывается только последний пустой url(). – vsync

фантастический !!!!!!!!!!! – SpaceDog

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

источник

2009-05-04 09:00:28 Canavar

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

источник

2009-05-04 09:01:16 Peter

= lag (в некоторых браузерах) – 2017-04-21 23:46:07

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

источник

2009-05-04 09:03:43

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

Это действительно хорошее решение, мы можем также использовать положение абсолютное и; height: 0 в CSS, не так ли? –

Если он не загружен, когда он скрыт, возможно, это поможет иметь некоторый «видимый» диапазон/div высоты 0 со стилем = «фон: url (imgx.jpg)»? Просто идея ... не знаю, помогает ли она или работает: p – Svish

Нет необходимости предварительно загружать изображения. Я не понимаю, почему 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

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

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

источник

2009-05-04 09:12:18 Thinker

Я не могу этого достаточно подчеркнуть. Это (единственный) путь. – Kriem

Спасибо .. за пояснение –

Хороший компактный образец. Помог мне много сделать так. – Marc

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

источник

2009-05-04 09:20:44

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

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

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

источник

2012-07-08 18:01:57

Это ответ, единственный правильный способ сделать это. – vsync

Пока этот _mostly_ работает, некоторые браузеры (например, Opera) не будут загружать изображения для отображения: none elements. http://www.quirksmode.org/css/displayimg.html –

Вы могли бы включить его без отображения, но не располагать его вне рисованной области: 'background-position: -100px -100px;'. –

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;

источник

2013-09-16 17:55:54

Если предварительная загрузка изображений - это то, что вы ищете, то производительность - это то, что вы хотите. Я сомневаюсь, что страница будет заблокирована, а загрузка ресурсов - это то, что вы хотите. SO, просто поместите некоторые предварительные ссылки в конце тела и добавьте им фиктивные носители, чтобы они выглядели несущественными (чтобы они загружались после всего остального). Затем добавьте тег onload к этим ссылкам, и в этом 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" />

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

источник

2017-04-21 01:22:28

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

ответ

До:

После:

Смежные вопросы