僅在原始圖像更新後才移除重疊圖像

當創建具有交叉漸變效果的簡單照片庫時，我遇到了奇怪的行爲。（1）我淡入原始圖像頂部的覆蓋圖像，（2）我將底層原始圖像的src屬性更改爲覆蓋圖像的src屬性，並且作爲最後一步，（3）我刪除覆蓋圖像。僅在原始圖像更新後才移除重疊圖像

$("#photo").attr({ 
    src: imageURL, 
    alt: altText 
}); 
$("#overlay-photo").remove();

上述代碼（顯示最後兩個步驟）在所有圖像被緩存時都有效。當緩存爲空時，它會在顯示更新後的圖像之前短暫閃爍舊的未更改的圖像，這可能是因爲屬性的更改和src屬性的刪除同時發生，刪除可能比更改src屬性更快，更新圖像。你可以看到，我試圖以某種方式附加一個回調函數（在這種情況下與每個），但沒有解決問題。

來源

2011-05-08 Michael Kaltenecker

把這個弄出來。我認爲它會適用於你：

$('#overlay-photo').fadeIn(500,function() { 

     $('#photo').hide().one('load',function() { 
      $(this).fadeIn(); 
      $('#overlay-photo').remove(); 
     }).attr({ 
      src: imageURL, 
      alt: altText 
     }); 
    });

來源

2011-05-08 09:53:34 thecodeparadox

@Michael Kaltenecker如果你有一些問題，請評論，我會盡力解決。您可能需要調整CSS屬性。 – thecodeparadox 2011-05-08 09:54:16

是的，我認爲CSS屬性現在是問題。我在覆蓋照片上使用負邊距將其放在原始照片的正上方。由於這張原始照片現在不再以秒爲單位顯示，所以整個頁面跳躍了一秒鐘。 – 2011-05-08 11:17:38

啊！我剛剛刪除了'.hide（）'和'$（this）.fadeIn（）'。它似乎沒有它，閃爍消失。由於原始照片不再隱藏，負邊距也不成問題。是否有必要隱藏原始照片，或者我可以離開？ – 2011-05-08 11:27:57

僅在原始圖像更新後才移除重疊圖像

回答

相關問題