VPF::Ассинхронная загрузка изображения

dummer

Дата 2.11.2008, 15:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 14.5.2007

Репутация: нет
Всего: нет

Никак не могу осуществить загрузку изображения с аннимицией во воремы фоновой загрузки.

http://free-lancer.uz/77.html

Мне необходимо не просто подгрузить изображение, а сделать это красиво.
То есть, когда человек нажимает на маленькую превьюшку внизу, происходит плавное исчезновения большой картинки ... далее тишина ... а потом появляется новая картинка .

В скрипте много сырого кода, поэтому приведу тот, который относится к данному эффекту.

Событие, которое происходит при нажатии на картинку

Код


jQuery("a.link_little").click(function(){
                                       
        jQuery("div.loading").fadeIn(600);
    jQuery("#img_div").animate({ opacity: 0},{queue:true, duration:600 });
    var img_linki = jQuery(this).attr("title"); //получаем ссылку на изображение
       var im = new Image(); // создаем объект 
        im.src = img_linki;      // присваиваем уме значение
    
    var destination = jQuery("div.fonts").offset().top;  //Определяем место положение ссылки на страничке
    jQuery("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination+120}, 600 );  

checkload(im,img_linki); // вызываем функцию, которая проверяет загружено ли изображение (в нем  то и проблема)
setTimeout('checkload(im,img_linki)',100);


})

Функция, которая должна выполнять определенные действия, после загрузки изображения.

Код


function checkload(im,img_linki){
    var timer ;
    clearTimeout(timer);
if (!im.complete){
    
timer = setTimeout('checkload(im,img_linki)',100);
//alert(timer);
    }
else{
      jQuery("div.loading").fadeOut(600);
      jQuery("#write").append("Loaded!!");
      jQuery("#img_link").attr("src",img_linki);
      jQuery("#img_div").animate({ opacity: 1},{queue:true, duration:600 });
      //alert(im.complete);
    }

}

ПРоблема в том, что функция должна периодически проверять , загружен ли файл или нет, если ответ положительный , то выполяется анимированное появление нового изображения.
Но эта функция почему-то не срабатывает.

Если нажать на превью снизу, то произойдет загрузка изображения, но анимации не произойдет.
Если же нажать на эту превьюшку еще раз(когда изображение уже в кэше браузера), анимация осуществиться.

Это сообщение отредактировал(а) dummer - 2.11.2008, 15:56

IDVsbruck

Дата 3.11.2008, 01:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22

Ну зачем же такой ручной способ с таймаутом, когда есть замечательное событие у имиджа onload?

Код

jQuery("a.link_little").click(function(){
    jQuery("div.loading").fadeIn(600);
    jQuery("#img_div").animate({ opacity: 0},{queue:true, duration:600 });
    var img_linki = jQuery(this).attr("title");
    var im = new Image();
    im.src = img_linki;
    if (im.readyState != "complete") checkload(im, img_linki);
    else complete_load(img_linki);
    var destination = jQuery("div.fonts").offset().top;
    jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination+120}, 600);
});
function check_load(image, imglnk) {
    var handler = function() {complete_load(imglnk)};
    image.onload = handler;
}
function complete_load(imglnk) {
    jQuery("div.loading").fadeOut(600);
    jQuery("#write").append("Loaded!!");
    jQuery("#img_link").attr("src", imglnk);
    jQuery("#img_div").animate({opacity: 1},{queue:true, duration:600});
}

Некоторые пояснения к коду:
1. Если readyState не равно complete (а равно оно будет, если файлик очень-очень маленький, тест на локальной машине или, возможно, картинка уже в кеше), то ставим событие onload. В противном случае сразу переходим к загруженному.
2. Функция check_load - замыкание. Она нужна для данного примера, так как время жизни переменной img_linki меньше времени срабатывания события. Поэтому нужно либо замыкание (как у меня), либо выносить переменную img_linki в глобальное поле (или делать массив в глобальном поле).

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

dummer

Дата 3.11.2008, 20:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 14.5.2007

Репутация: нет
Всего: нет

IDVsbruck, к сожалению ваш код не работает. :-(

Добавлено через 13 минут и 10 секунд
IDVsbruck, Все работает, если изменить одну неточность (с первого раза не заметил) в 7 строке

Код


    if (im.readyState != "complete") check_load(im, img_linki);

Всего гениальное просто smile

, а я 2 дня сижу и не могу понять в чем проблема smile

IDVsbruck

Дата 4.11.2008, 01:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22

А, да. Извини, очепятка.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »