Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Функция замены картинок по клику с помощью JQuery


Автор: snaipi91 30.1.2013, 14:29
Вот собственно код функции которая заменяет картинки по клику
Код

$(['.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) . Если щёлкать по разнам картинкам с разными атрибутами то всё работает на УРА. Интересно Узнать Почему так?

Автор: Aliance 4.2.2013, 15:52
В jQuery есть функция http://api.jquery.com/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)

Автор: snaipi91 4.2.2013, 19:47
Цитата(Aliance @ 4.2.2013,  15:52)
В jQuery есть функция http://api.jquery.com/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)

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

Автор: Arantir 4.2.2013, 20:26
Может дело в том что для уже загруженной картинки события завершения загрузки не вызывается? 
Помимо того, что это само по себе логично (нет загрузки - нет ивента), то об этом упоминается в описании функции:
Цитата
Can cease to fire for images that already live in the browser's cache
http://api.jquery.com/load-event/

Чтобы проверить, загружена ли картинка, существует соответствующее свойство http://www.w3schools.com/jsref/prop_img_complete.asp.

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

Код

$(['.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);
});

Автор: snaipi91 5.2.2013, 00:21
Цитата(Arantir @ 4.2.2013,  20:26)
Может дело в том что для уже загруженной картинки события завершения загрузки не вызывается? 
Помимо того, что это само по себе логично (нет загрузки - нет ивента), то об этом упоминается в описании функции:
Цитата
Can cease to fire for images that already live in the browser's cache
http://api.jquery.com/load-event/

Чтобы проверить, загружена ли картинка, существует соответствующее свойство http://www.w3schools.com/jsref/prop_img_complete.asp.

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

Код

$(['.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);
       }

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)