Асинхронная загрузка изображения
Доброго времени суток!
У меня возникла проблема с реализацией одной задумки http://www.free-lancer.uz/my/portfolio_inner.html На странице есть одна большая картинка , а под ней несколько маленьких(они содержат ссылки на большие картинки). Мне необходимо , чтобы при клике на маленькие картинки происходила смена большой картинки на другую , без перезагрузки страницы. Этого можно добиться простой сменой атрибута src у большой картинки, но мне надо, чтобы все было красиво т.е. при нажатии на маленькую картинку появлялась надпись "Загрузка" , а после того как картинка загрузиться в асинхронном режиме эта надпись исчезала и появлялась картинка. |
dummer,
большую картинку кладете в див, у которого фоном анимированный лоадер. Далее, при событии onload у большой картинки делаете ее видимой, а перед сменой src скрываете ее. Тогда во время загрузки будет виден анимированный фон. |
Как имено произвести загрузку картинки с помощью onload?
|
dummer,
Цитата:
|
Да нет, он спрашивает как узнать, что картинка загрузилась? Мне тоже интересно, не получается кроссбраузерно сделать проверяя image.complete что-то.
|
Octane, Вы попали в точку !!!
|
Когда картинка загружается вызывается обработчик onload объекта Image (или HTMLElement). Разве нет?
|
Андрей Параничев, Вы можете привести рабочий вариант?
|
В «Opera» не работает «onload» для <img>, хотя щас попробую добавлять в дерево абсолютно позиционированное изображение с «visibility: hidden;».
------------------------------------- Добавлено: Если в дерево добалять, то срабатывает только первый раз, когда картинки еще нет в кэше
window.onload = function() {
var img = new Image();
img.src = 'image.gif';
img.onload = function() {
alert('loaded');
};
document.body.appendChild(img);
};
Конечно можно случайное число в запросе отправить, чтобы предотвратить кэширование, но все же это не выход. Подумаю как можно это реализовать… |
Цитата:
|
Цитата:
|
Octane,
описанную схему я не из теории взял, она у меня прекрасно работает. |
dummer,
Нижеизложенный код работает и в FF3.0 и в Opera9.61. Даже после кеширования изображения onload срабатывает
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>11</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="robots" content="noindex, nofollow" />
</head>
<body>
<img id='img' src='' alt='' style='width: 200px' />
<a href='' onclick="document.getElementById('img').src='A_000.jpg'; return false;">1</a>
<a href='' onclick="document.getElementById('img').src='A_002.jpg'; return false;">2</a>
<a href='' onclick="document.getElementById('img').src='A_004.jpg'; return false;">4</a>
<a href='' onclick="document.getElementById('img').src='A_006.jpg'; return false;">6</a>
<script type='text/javascript'>
document.getElementById('img').onload = function(){
alert(this.src+' is loaded!')
}
</script>
</body>
|
EugenyK, вы не правы, специально перепроверил.
Если страница закеширована (то есть если обновлять страницу не через F5, а просто перейдя на нее по ссылке) , то событие onload не срабатывает. Тут поможет свойство "complete" , объекта <img/> Это свойство равно true , когда изображение уже загружено в кеш, и false если не загружно. Таким образом ваш код:
<script type='text/javascript'>
document.getElementById('img').onload = function(){
alert(this.src+' is loaded!')
}
</script>
меняем на:
<script type='text/javascript'>
if (document.getElementById('img').complete) {alert(this.src+' is loaded!')}
else document.getElementById('img').onload = function(){
alert(this.src+' is loaded!')
}
</script>
Если используем jQuery, то вполне можно сделать так:
<script type='text/javascript'>
if ($('#doorimg').attr("complete")) {alert(this.src+' is loaded!')}
... и т.д.
</script>
|
| Часовой пояс GMT +3, время: 12:00. |