Постзагрузка картинок

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

Часто таких превью может быть более 20-30, и разумеется, если бы их оригиналы загружались вместе с уменьшенными копиями, такие страницы грузились бы минутами, если не больше. Достаточно посчитать, что картинка среднего размера занимает 100-200 Кбайт, и 20 подобных фото могут весить более 4 Мбайт.

Но есть достаточно оригинальный способ решения этой проблемы. Более двух лет назад я писал статью "Предзагрузка картинок" и теперь буду использовать подобный скрипт для реализации ПОСТзагрузки.

Весь код я выложу в отдельный архив, ссылку на который вы можете увидеть ниже. А вам я попытаюсь объяснить основную идею постзагрузки. Предположим у нас есть две превью картинки, при чем при нажатии на любую из них необходимо загрузить большое фото и отобразить его. Реализация следующая:

1. Получаем имя большой картинки и создаем новый объект pic:

var pic = new Image();
var timer;

function changePicture(pictureName) {

pic = new Image();
pic.src = "images/" + pictureName;
timer = setTimeout("checkLoading()", 1000);

}

2. Создаем таймер, который будет через каждую секунду выполнять функцию checkLoading. Данная функция проверяет свойство объекта complete. Если оно равно true, значит фото было полностью загружено и его можно отобразить на странице:

function checkLoading() {

if (pic.complete == true) {

document.getElementById("ID картинки").src = pic.src;

} else {

timer = setTimeout("checkLoading()", 500);
}
}


Вот и все. При помощи данного алгоритма можно, к примеру создать следующий эффект (Скачать код).

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

webobzor.net

Федор   03.11.2008  11:40 Замечательный скрипт! Можно решать задачи и без php-программ, работающих на удаленном сервере

lexa  03.11.2008  13:59 ну наконец-то хоть кто-то оценил :)

JOKER    08.12.2008  23:43 Да прикольный скриптец. Я вот как раз подобное собирался написать. Спасибо :)

* Ник:
E-mail:
Сайт:
* Комментарий:
* Введите число:	791