Простая фотогалерея (проблемы)

[jazzlevit]

//
// gallery img
//
function bigImg()
{
	$('.thumb a').click(function(){
		var hereBig = $(this).attr('href');
		
		$('.big img').attr('src',hereBig);
	
		return false;
	});		
}
bigImg();

Есть большое изображение в .big img
есть превьюшка .thumb img

по клике на .thumb img берем атрибут href и передаем его в .big img при этом у нас начинает отображается большая фото.
вот как тут http://works.webakula.com.ua/crazy_b...l/catalog6.php
Проблема
Если фото много весит, или мендленный интернет, то пользователь сразу ее не увидет.
1) можно ли как то показать gif картинку пока фотка не загрузилась?
2) как вообще такие вещи делаются по правильному, обязателен ли ajax или можно и так справится?

[Serg_pnz]

1. Делаем предзагрузку, например этим

$.preloadImagesS = function () {
    if (typeof arguments[arguments.length - 1] == 'function') {
        var callback = arguments[arguments.length - 1];
    } else {
        var callback = false;
    }
	var Img = arguments[0]
	$(new Image()).load(function(){
		if (typeof callback == 'function') {
			callback();
		}
	}).attr('src', Img);
}

Вызывается так

$.preloadImagesS (IMG_URL, function(){
//тут выводим большую картинку картинку, т.к. она уже подгрузилась
});

А по клику сначала показываем спинер .gif

2. имхо обязателен и "так" не справиться

[jazzlevit]

Спасибо большое, но чтобы разобраться подробнее нужен пример, у вас нет чего то подобного?
Хотя нет спасибо разобрался, все работает, отлично!

1)Я так понял, $.preloadImagesS грузит картинку куда то в темп и позже

$.preloadImagesS (Урл, function(){
здесь выводит ее в случае удачной загрузки.
});

правильно?

2)$.preloadImagesS - это ajax функция готовая?

[Serg_pnz]

1. Вот пример, всё прокомментировано. По-быстрому и без украшательств эффектами http://preload001.jcase.ru/
Что бы поиграться - чисти кэш (обновляйся по ctrl+r или как там...)

2. $.preloadImagesS - нарыта буквально на днях на просторах инета, немного мной модифицирована, в том числе с помощью постов на этом форуме, за что всем спасибо!

[jazzlevit]

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

[Serg_pnz]

Не надо ничего проверять - если фотка в кэше $.preloadImagesS моментально откликнется.
Посмотри firebug в раздел "Сеть". При первой загрузке ответ 200 и спинер, при второй (при простом обновлении по F5) ответ 304 и спинера почти не видно.
Я бы даже сделал отображение спинера с задержкой в полсекунды, что бы не прыгал.