VPF::Функция замены картинок по клику с помощью JQuery

snaipi91

Дата 30.1.2013, 14:29 (ссылка)

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

Загрузка ...

Новичок

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

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

Вот собственно код функции которая заменяет картинки по клику

Код


$(['.rolls_img1 a'[/color]).click(function(eventObject){ 

       $('#foto img'[/color]).hide().attr('src',$(this).attr('href'));  

       $('#foto img'[/color]).load(function(){  // при загрузки картинки срабатывает функция

       $(this).fadeIn(500);

       })
     eventObject.preventDefault();

 })

Всё работает, но при повторном щелчке по одной и той же картинке происходит не то что надо, при шелчке картинка скрывается и не появляется заного тобишь не работает .fadeIn(500) . Если щёлкать по разнам картинкам с разными атрибутами то всё работает на УРА. Интересно Узнать Почему так?

Это сообщение отредактировал(а) snaipi91 - 30.1.2013, 14:46

Присоединённый файл ( Кол-во скачиваний: 6 )

screen1.png 396,78 Kb

Aliance

Дата 4.2.2013, 15:52 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

В jQuery есть функция $().load, которая является alias`ом на ajax подгрузку данных в указанный элемент.
Несмотря на заверения разработчиков, что

Цитата

Note: The event handling suite also has a method named .load(). jQuery determines which method to fire based on the set of arguments passed to it.

Возможно, это не так. Замени на $(elem).on('load', callback) (либо на $(elem).bind('load', callback) при старых версиях jQuery)

Это сообщение отредактировал(а) Aliance - 4.2.2013, 15:53

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

snaipi91

Дата 4.2.2013, 19:47 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(Aliance @ 4.2.2013, 15:52)

Цитата

Note: The event handling suite also has a method named .load(). jQuery determines which method to fire based on the set of arguments passed to it.

Возможно, это не так. Замени на $(elem).on('load', callback) (либо на $(elem).bind('load', callback) при старых версиях jQuery)

Не помогает,
Версия JQuery не старая.

Arantir

Дата 4.2.2013, 20:26 (ссылка)

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

Загрузка ...

Рыбак без удочки

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

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

Может дело в том что для уже загруженной картинки события завершения загрузки не вызывается?
Помимо того, что это само по себе логично (нет загрузки - нет ивента), то об этом упоминается в описании функции:

Цитата

Can cease to fire for images that already live in the browser's cache

http://api.jquery.com/load-event/

Чтобы проверить, загружена ли картинка, существует соответствующее свойство complete.

И вообще, многократно вешать один и тот же ивент на один и тот же элемент - это, так сказать, неграмотно. Ивент и так вешается навсегда.

Код


$(['.rolls_img1 a').click(function(event){
    event.preventDefault();    
    var img = $('#foto img');
    img.hide().attr('src', $(this).attr('href'));
    if (img.complete)
    {
        $(this).fadeIn(500);
    }
});
$('#foto img').load(function(){
    $(this).fadeIn(500);
});

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

snaipi91

Дата 5.2.2013, 00:21 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(Arantir @ 4.2.2013, 20:26)

Цитата

Can cease to fire for images that already live in the browser's cache

Код


$(['.rolls_img1 a').click(function(event){
    event.preventDefault();    
    var img = $('#foto img');
    img.hide().attr('src', $(this).attr('href'));
    if (img.complete)
    {
        $(this).fadeIn(500);
    }
});
$('#foto img').load(function(){
    $(this).fadeIn(500);
});

Спасибо за помощь, всё заработало

Код


if($('#foto img').ajaxComplete){
           $('#foto img').fadeIn(500);
       }

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