jQuery的.attr（）與回調？

在我的設置中，我使用jquery淡出圖像，將其源代碼改爲其他內容，然後淡入。但是，有時在慢速連接時，圖像會在源完全更改之前淡入，所以舊圖像仍然會出現短暫的第二個新的才能回來。jQuery的.attr（）與回調？

有沒有辦法來對ATTR使褪色回到ATTR變化反映時才調用的回調？

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

我使用fadeTo不fadeIn（）所以圖像大小保留。

來源

2010-10-28 Razor Storm

綁定的事件處理程序load event在圖像上，並淡出出來的處理程序。

來源

2010-10-28 07:37:53

你想檢查圖像何時加載？的作品。

注：我從來沒有見過它，但我讀過它可能會被過早觸發。所以你可能想檢查圖像的高度。

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

來源

2010-10-28 07:38:25 Jason

難道這不會對'.load'進行綁定，每次運行此代碼時都會添加越來越多的綁定。在全球範圍內添加綁定可能會更安全。 – 2010-10-28 07:46:20

是的。接得好。我不記得'.load（）'是否會重新觸發，如果它已經被重新觸發。 @Squeegy下面有一個解決方案，如果沒有的話，這個解決方案就是一個解決方案。我記得當我使用'.load（）'時發生了一些可怕的事情。 – Jason 2010-10-28 07:49:55

我添加了一個unbind。嘗試比較我們的代碼並查看@squeegy是否正確。 – Jason 2010-10-28 07:51:16

您需要預加載圖像，並在加載圖像時處理加載事件。

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被加載時，你的函數將被調用並且你的淡入淡出會發生。圖像現在被緩存並可以立即使用。

來源

2010-10-28 07:41:44

做了一個'.load（）'在相同的元素獲得重新觸發，如果它已經被觸發一次？ – Jason 2010-10-28 07:44:16

本示例爲您加載的每個圖像創建一個新對象，並將'load'事件綁定到該對象一次。即使圖像已經加載，'load'事件仍然被觸發和處理。所以這裏沒有「相同的元素」，因爲它每次都有一個新的對象。 – 2010-10-28 16:08:29

jQuery的.attr（）與回調？

回答

相關問題