Выполнить функцию в обратном вызове attr ()?

Question

Не уверен, правильно ли я это делаю или нет.

Вот мой .js:

var currentIMG;
$( '.leftMenuProductButton' ).hover(function () {

     currentIMG = $("#swapImg").attr("src");
     var swapIMG = $(this).next(".menuPopup").attr("id");

     $("#swapImg").css("opacity", 0)
                  .attr("src", productImages[swapIMG], function(){
          $("#swapImg").fadeTo("slow", 1);
     });

}, function () {
     $("#swapImg").stop().attr("src",currentIMG);   
});

То, что я пытаюсь сделать, это установить непрозрачность IMG на 0 (#swapImg), заменить его на src, затем вернуть его обратно. Поэтому я пытаюсь вернуть его обратно с помощью обратного вызова из .attr().

Если я делаю это неправильно, может кто-нибудь объяснить, пожалуйста, лучший способ сделать это? Причина, по которой я пытаюсь сделать это в обратном вызове, заключается в том, что мне нужно, чтобы fadeTo появлялся только после полной загрузки нового изображения, в противном случае он немного мигает.

Я использую jQuery 1.4, и, согласно http://jquery14.com/day-01/jquery-14, вы можете сделать обратный вызов в методе .attr().

Answer 1

Вы можете сделать это с событием загрузки следующим образом:

$("#swapImg").css("opacity", 0).attr("src", productImages[swapIMG])
             .one("load",function(){ //fires (only once) when loaded
                $(this).fadeIn("slow");
             }).each(function(){
                if(this.complete) //trigger load if cached in certain browsers
                  $(this).trigger("load");
             });

Затухание начнется после того, как сработало событие загрузки изображения.

Answer 2

$("#swapImg").css("opacity", 0).attr("src", productImages[swapIMG])
         .on("load",function(){ //fires each time when image loaded
            $(this).fadeIn("slow");
         });

Это также будет правильно.