在Chrome中的大圖像中淡入淡出

我在大圖像中遇到了一些麻煩，但只在Chrome中出現問題。在Chrome中的大圖像中淡入淡出

這裏是絕對的基本設置：

$(document).ready(function(){ 
    var img = new Image(); 
    $(img) 
     .hide() 
     .load(function(){ 
     $(this).fadeIn(3000) 
     }) 
     .attr("src", "files/originals/01.jpg") 
    $("body").append(img) 
});

據我所知，這是動態創建的圖像，加載它的傳統方式，以及淡入當它完成加載。現在，這個功能在FireFox，Safari甚至IE中都很完美，但當我使用大圖像（分辨率大於1900x1200）時，Chrome並非完全適用。在有人對我的規模感到憤怒之前，我應該補充說，這是該項目的一項要求。在所有瀏覽器中會發生什麼情況，但Chrome會在圖像加載時出現延遲（預期），並在圖像加載完成後延遲。在Chrome中，我在圖像加載時得到了常規延遲，然後又出現了另一種延遲fadeIn的持續時間（在我的示例中爲3000ms）之後，圖像簡單地「出現」，就像我使用show（）一樣。雖然較小的圖像在所有瀏覽器中都能很好地工作。

什麼給？我錯過了什麼？

來源

2010-10-20 Alexander Filatov

我試過你的代碼與FF，IE和Chrome和所有工作對我很好。看看[這裏]（http://jsfiddle.net/xaUTj/）並試試看。我已經把你的功能，betamax解決方案和我的另一個小變化放在一起。加載圖片可能需要一些時間。它是2MB，從imageshack加載。 – Andreas 2010-10-20 17:14:54

同樣適用於我。可能是亞歷山大電腦的問題？ – betamax 2010-10-20 21:45:53

嗯，它可能是電腦的東西，因爲當我今天早上再次嘗試我自己的代碼時，它的工作！清除緩存和所有內容，無法重新創建問題。謝謝你們的幫助！ – 2010-10-21 08:01:00

也許嘗試將圖像的插入一旦加載後移動到DOM中？像這樣：

$(document).ready(function(){ 
    var img = new Image(); 
    $(img) 
     .hide() 
     .load(function(){ 
     $("body").append(this); 
     $(this).fadeIn(3000); 
     }) 
     .attr("src", "files/originals/01.jpg") 
});

來源

2010-10-20 16:16:12 betamax

在Chrome中的大圖像中淡入淡出

回答

相關問題