爲什麼圖像預加載無效？

我的CMS項目有一個時尚的web 2.0登錄屏幕，使用javascript淡出屏幕。即使我已經預先加載了120％的圖片（我在開發工具中使用了資源監視器），但是我的登錄屏幕出現時仍然需要一秒鐘纔會顯示。它徹底摧毀了幻想！請看：爲什麼圖像預加載無效？

~~http://www.dahwan.info/Melior~~ （鏈接斷開）

當你點擊登錄，屏幕應該用75％的α-1px的png圖片褪色暗。即使圖像已預加載，但直到動畫完成後纔會顯示。但是，如果您單擊取消並再次登錄，動畫將流暢而完美地流動。

任何人都可以想出解決這個問題的辦法嗎？我和我的CMS的GUI的其他部分一樣。這就像沒有圖像預加載過這樣的東西。

感謝答案

編輯：是啊，我目前正在開發這個CMS谷歌瀏覽器5.0.375.99，後來添加多瀏覽器的兼容性。對不起，離開了這一點

來源

2010-07-12 Hubro

值得一提的是你已經看到了問題的瀏覽器。我只是在Firefox 3.6中試過它，它似乎工作正常。 – Jake 2010-07-12 18:49:30

鏈接崩潰我的瀏覽器選項卡（IE 8 - Vista 32位） – ZippyV 2010-07-12 18:50:53

對不起，反對，但你有沒有考慮不使用圖像？我過去使用過jQuery Tools覆蓋（http://flowplayer.org/tools/demos/overlay/custom-effect.html），並取得了成功。如果你想自己做，你可能只想使用固定的背景RGB圖像。爲了記錄，屏幕對我來說工作正常。 – 2010-07-12 18:53:08

我想出了一個解決方法來解決我的問題。我現在已經在兩臺不同的計算機上的三臺瀏覽器上測試了這個結果，並獲得了完美結果簡而言之，在javascript中我的圖像預加載功能中，我將每個圖像都添加到DOM中的一個不可見的Div標籤中。

$('#img_preload').append($('<img />').attr('src', img.src));

的圖像正在添加到DOM在頁面加載，並按照我的理論，我的低端電腦的內存休息，他們當我的CMS需要他們即刻出現。

感謝您的意見:)

來源

2010-07-12 19:13:18 Hubro

UI線程一次只能管理一個任務 - 它會執行JavaScript或更新UI。如果在預加載圖像的代碼之前有很多javascript解析/執行，那可能會導致延遲。

另一個建議是在頁面上檢測到圖像之後，禁用登錄鏈接上的可點擊性。

這樣做是相當簡單：
功能disableBtn（EL）{
變種BTN =的document.getElementById（EL）;
var btnId = btn.id;
btn.disabled = true;
}

要重新啓用，請設置btn.disabled = false（檢測到您的圖像已添加到DOM後）。

來源

2010-07-12 19:12:12 frabjousB

我已經排除了圖像被緩慢加載作爲原因導致我的問題，因爲在某些情況下，我已經檢查了資源監視器幾分鐘，甚至在單擊登錄按鈕之前看到顯示器中的圖像。但是，感謝您的回覆 – Hubro 2010-07-12 19:16:26

您也可以將它們預加載到數組中。你的問題可能是由所謂的「垃圾回收」造成的。這是瀏覽器查找消耗內存的對象的地方，這些內存在屏幕上不再有實例，並且沒有被內存中的其他任何東西引用。

如果您將圖像預加載到網頁時代，它們應該被加載到緩存中。所以，當再次引用它們時，它們仍然應該重新出現。但是，如果緩存過期未爲這些類型的文件設置足夠長的時間，圖像也可能會消失。

您的問題也可能是瀏覽器的具體情況....我發現最好是通過將它們放入一個圖像數組然後使用該數組調出來爲預加載內容創建一個「錨點」在需要時代圖像而不是圖像URL（URI）。

這是一篇快速而骯髒的文章，涵蓋了這個主題。

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

來源

2010-07-12 21:06:12 exoboy

將圖像加載到數組中是我已經使用的方法。我再次道歉提供這麼少的信息。無論如何，我已經解決了這個問題，並回答了它:) – Hubro 2010-07-13 00:41:11

很酷！我很高興它運作良好。但是，你所做的事情實際上會佔據舞臺（頁面）上的空間，而我的音樂會將它保存在空靈的平面（記憶）中，而沒有任何舞臺上的實體存在的風險或移動內容的可能性，不需要定義任何CSS。 – exoboy 2010-07-13 04:32:46

關於這個問題的一個有用的信息：

的Codemonkey解決方案的工作，因爲，通過將圖像在一個隱藏的DIV，瀏覽器必須保持在內存中，並準備將這些圖像的div的可見性可能發生變化。如果用戶需要將div的隱藏可見性從隱藏變爲阻塞，則必須立即完成。這就是爲什麼只將所有圖像加載到數組中不能正常工作的原因。

來源

2010-07-13 17:49:39

好吧，使用數組來存儲圖像對象已爲我工作多年。所以，請儘量避免發表評論，你不是100％確定的.... – exoboy 2010-07-14 21:53:34

爲什麼圖像預加載無效？

回答

相關問題