jquery .attr() с обратным вызовом?

Question

В моем наборе я использую jquery, чтобы затухать изображение, изменить его источник на что-то еще, а затем снова увязнуть. Однако иногда при медленных соединениях изображение будет исчезать до того, как источник полностью изменится, поэтому старое изображение будет по-прежнему появляются на короткую секунду до появления новой.

Есть ли способ получить обратный вызов на attr, так что затухание обратно вызвано только при отражении изменения attr?

$(".img").fadeTo("fast",0,function(){ 
    $(".img").attr({ 
     //some other stuff 
     'src':url 
    }); 
    $(".img").fadeTo("fast",1); 
    //other stuff 
}); 

Я использую fadeTo не fadeIn(), поэтому размер изображения сохраняется.

Answer 1

Привяжите обработчик события к изображению load event и выцведите его в обработчике.

Answer 2

Вы хотите проверить, когда изображение загружено? .load() работает.

Примечание: Я никогда не видел его, но я читал, что он может быть вызван преждевременно. Поэтому вы можете проверить высоту изображения.

$(".img").fadeTo("fast",0,function(){ 
    $(this).attr({'src':url}); 
    $(this).load(function(){ 
    $(this).fadeTo("fast",1); 
    $(this).unbind("load"); 
    }); 
}); 

Answer 3

Вам необходимо предварительно загрузить изображение и обработать событие загрузки при загрузке изображения.

var img = new Image(); 
$(img).load(function() { 
    // Do fading and attr swapping stuff here 
    // The new image is already loaded at this point 
}); 

img.src = myImgUrl; 

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