Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.02.2012, 15:50
Новичок на форуме
Отправить личное сообщение для jazzlevit Посмотреть профиль Найти все сообщения от jazzlevit
 
Регистрация: 02.02.2012
Сообщений: 5

Простая фотогалерея (проблемы)
//
// 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 или можно и так справится?
Ответить с цитированием
  #2 (permalink)  
Старый 02.02.2012, 16:36
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

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. имхо обязателен и "так" не справиться
Ответить с цитированием
  #3 (permalink)  
Старый 02.02.2012, 16:58
Новичок на форуме
Отправить личное сообщение для jazzlevit Посмотреть профиль Найти все сообщения от jazzlevit
 
Регистрация: 02.02.2012
Сообщений: 5

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

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

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

правильно?

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

Последний раз редактировалось jazzlevit, 02.02.2012 в 17:42.
Ответить с цитированием
  #4 (permalink)  
Старый 02.02.2012, 18:41
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

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

2. $.preloadImagesS - нарыта буквально на днях на просторах инета, немного мной модифицирована, в том числе с помощью постов на этом форуме, за что всем спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 03.02.2012, 12:57
Новичок на форуме
Отправить личное сообщение для jazzlevit Посмотреть профиль Найти все сообщения от jazzlevit
 
Регистрация: 02.02.2012
Сообщений: 5

Спасибо большое за помощь и за пример, все получилось наконец то я сделал свой первый шаг к ajax, давно хотел зделать загрузку по нормальному. теперь еще нужно попробовать разные проверки сделать, типо проверять загружена фотка или нет чтобы повторно не выводить.
Ответить с цитированием
  #6 (permalink)  
Старый 03.02.2012, 14:38
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы с отображением элементов на странице mozyr Javascript под браузер 17 13.01.2012 01:34
простая форма авторизации sedoyksa Общие вопросы Javascript 5 01.10.2011 22:29
Проблемы с картой изображений mmolib Events/DOM/Window 0 06.12.2010 20:34
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 17:47