Предварительная загрузка изображений

Предварительная загрузка изображений

Aвтор:неизвестный
Дата: 24.05.2006
Просмотров: 45772
реализации(javascript: 1шт...) +добавить

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

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

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

Реализации:

javascript(1) +добавить

1) Предварительная загрузка изображений на javascript, code #147[автор:-]

Предварительная загрузка изображений в кеш браузера, организация ролловеров ссылка |режим:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	
<HTML>	
<HEAD>	
<TITLE>Предварительная загрузка изображений</TITLE>	
<script type="text/javascript" language="JavaScript">	
<!--//--><![CDATA[//><!--	
if (document.images) {	
    var img = new Object();	
    img["first"] = new Image(80, 80);	
    img["first"].src = "test.gif";	
    img["second"] = new Image(80, 80);	
    img["second"].src  = "test2.gif";	
    // и так далее...	
}	
//--><!]]>	
</SCRIPT>	
</HEAD>	
<BODY>	
<IMG src="test2.jpg" height="80" width="80" onmouseover="this.src = img['second'].src" onmouseout="this.src = img['first'].src" />	
</BODY>	
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	
<HTML>	
<HEAD>	
<TITLE>Предварительная загрузка изображений</TITLE>	
<script type="text/javascript" language="JavaScript">	
<!--//--><![CDATA[//><!--	
if (document.images) {	
    var img = new Object();	
    img["first"] = new Image(80, 80);	
    img["first"].src = "test.gif";	
    img["second"] = new Image(80, 80);	
    img["second"].src  = "test2.gif";	
    // и так далее...	
}	
//--><!]]>	
</SCRIPT>	
</HEAD>	
<BODY>	
<IMG src="test2.jpg" height="80" width="80" onmouseover="this.src = img['second'].src" onmouseout="this.src = img['first'].src" />	
</BODY>	
</HTML>

В JS проблема решается просто: инициируется новый объект Image и в момент назначения ему src - браузер по указанному адресу запрашивает на сервере картинку.

К коду прилагаются тестовые изображения. Они а также и этот файл можно найти <a href="/data/tasks/76/File/impreload.rar" class=link>здесь</a>.

Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

<< назад наверх

*	можно кириллицей (недопустимые символы:?&+=\/%#)
**	только для зарегистрированных пользователей

Популярные задачи:

Предварительная загрузка изображений

Реализации: