如何將.gif作爲背景圖像顯示？

我有這樣一個javascript「加載」功能：如何將.gif作爲背景圖像顯示？

function splashScreen() { 
    var div = document.createElement('div'); 
    div.appendChild(document.createTextNode("some text")); 
    div.style.position = "fixed"; 
    div.style.width = "100%"; 
    div.style.height = "100%"; 
    div.style.left = "0"; 
    div.style.top = "0"; 
    div.style.zIndex = "1000"; 
    div.style.background = "white url('img/ajax-loader.gif') no-repeat center"; 
    div.style.fontSize = "x-large"; 
    div.style.textAlign = "center"; 
    div.style.lineHeight = "3em"; 
    div.style.opacity = "0.75"; 
    div.style.filter = "alpha(opacity=75)"; // fix ie 
    document.body.appendChild(div); 
    return true; 
}

我用這個函數形式的行動（onsubmit="return splashScreen()"），以顯示「旋轉標誌」，而接下來的頁面加載... 問題是在「img/loading.gif」和safari（在winXP上）中：在ff和ie中我沒有問題，並且我清楚地看到了動畫gif。在safari中，我看不到它。如果我改變圖像（顯然是靜態的）PNG圖像出現... 我做錯了什麼？ Safari瀏覽器有什麼問題？

來源

2010-04-06 Vito De Tullio

有已知的關於safari和動畫gif的bug報告。 gif凍結 - 在某些情況下甚至瀏覽器凍結 - 我在加載大量動畫gif的頁面上遇到過這種情況。 – easwee 2010-04-06 14:59:40

順便提一下，請不要在HTML文檔中使用'getAttribute' /'setAttribute'。 IE6-7中存在嚴重的錯誤，這會導致'style'屬性和其他錯誤。使用DOM Level 2的HTML和CSS屬性更可靠，更具可讀性：'div.style.textAlign ='center';'et al。另外，'document.body'優於'getElementsByTagName'調用。 – bobince 2010-04-06 15:59:46

坦克@bobince，我改變了你的意見源... 不幸的是，問題remanins：\ – 2010-04-07 07:29:36

Safari不能很好地處理動畫背景。我在某處看到過一個關於這個bug的報告。

爲什麼你不使用圖像而不是背景？

來源

2010-04-06 14:52:19

我個人並不熟悉這個問題，但我可以在網上找到一些類似的錯誤報告。你還在做什麼？遇到此問題時，您是否專注於網頁？顯然，GIF動畫的處理是相當複雜的：

http://webkit.org/blog/96/background-music/
http://www.quirksmode.org/bugreports/archives/2004/12/animated_gifs_u.html
https://bugs.webkit.org/show_bug.cgi?id=7320

從第一環節特別是有關片段：

在這兩種野生動物園2，WebKit Nightlies版，GIF圖像不要」除非他們被繪在某個地方，否則不會生氣。如果動畫GIF變爲不可見，則動畫將暫停，動畫不會消耗CPU。因此，在該選項卡中的頁面變爲可見之前，後臺選項卡中的所有動畫圖像都不會生成動畫。如果動畫GIF即使在前景頁面上滾動離屏，它也會停止動畫，直到它再次變爲可見。

Safari的CPU使用率與動畫GIF非常好。（一段時間以來，MacNN的讀者認爲Safari由於在論壇帖子中輸入緩慢而產生「動畫GIF問題」，但該錯誤實際上與頁面頂部和底部的Flash廣告有關。）

來源

2010-04-06 14:53:22 Pops

umm，但gif應該是可見的：這是一個div的背景圖像與z-index：10000 .. – 2010-04-07 07:28:40

也許這是你的gif圖像？我剛剛在Safari 4.0.4下用gif創建的gif在windows下啓動了你的代碼，並且完美地工作。

來源

2010-04-06 15:03:46

我嘗試了一個來自ajaxload.info的gif，但我看不到它：\ 我嘗試了一個trasnparent gif和一個普通的gif：\ – 2010-04-07 07:27:39

這是我的/你的代碼，在上述safari上工作。 http://work4bandwidth.com/demos/backroundgif.html lemme知道它是否適合你 – 2010-04-08 22:10:16

如何將.gif作爲背景圖像顯示？

回答

相關問題