2011-03-18 51 views
5

我預載了一些圖像,然後在Lightbox中使用它們。我遇到的問題是,雖然圖像正在加載,但它們並未被瀏覽器顯示。在Chrome中未顯示預加載的圖像

此問題特定於Chrome。它一直堅持通過Chrome 8-10,而我一直在嘗試着去解決這個問題,並且一無所獲。

我已閱讀這些類似的問題,
Chrome not displaying images though assets are being delivered to browser
2 Minor Crossbrowser CSS Issues. Background images not displaying in Google Chrome?
JavaScript preloaded images are getting reloaded

,所有的細節類似的行爲,但在Chrome的Mac。而這在Windows中發生。

  • 所有其他瀏覽器似乎沒問題。
  • 如果您打開Firefox和Chrome,請在Firefox中加載頁面,然後在Chrome中顯示圖像。
  • 一旦你手動加載圖像,採用的Webkit Webdev的工具欄啄,他們總是出現
  • 所有鏈接的圖像和這樣的罰款和工作
  • 清除一切從Chrome中似乎並沒有作出任何差異(緩存,歷史等)

如果任何人有任何想法,這將是非常有益的,因爲我幾乎所有的選擇都在這裏。

PS,抱歉,如果有遲到的回覆,我明天就休假一週! :D

更新 這是預加載圖像的javascript函數。

var preloaded = new Array(); 
function preload_images() { 
    for (var i = 0; i < arguments.length; i++){ 
     document.write('<'); 
     document.write('img src=\"'+arguments[i]+'\" style=\"display:none;\">'); 
    }; 
}; 

更新
我仍然有問題,這一點,我已經刪除了整個預加載圖像的功能。也許通過document.write()提供樣式表不是最好的方法嗎?

+0

心靈粘貼一些代碼,以便我們瞭解您的壓載嗎? – jlindenbaum 2011-03-18 18:23:51

回答

5

Chrome可能沒有預加載它們,因爲它沒有顯示地寫入DOM,所以它可能足夠智能以實現它不需要渲染。試試這個:

var preloaded = new Array(); 

function preload_images(){ 
    for (var x = 0; x < preload_images.arguments.length; x++) 
    { 
     preloaded[x]  = new Image(); 
     preloaded[x].src = preload_images.arguments[x]; 
    } 
} 

JavaScript的Image對象有很多有用的功能,以及可能對您有用:

http://www.javascriptkit.com/jsref/image.shtml

onabort()

守則當用戶中止下載圖像時執行。

的onerror()發生錯誤時 與圖像的加載執行

代碼(即:不 找到)。實施例(多個)

的onload()被執行

代碼當圖像 成功和完全下載。

然後你也有complete屬性,其真/假告訴你,如果圖像已完全(預)加載。

+0

會在20個小時內添加賞金:) – 2011-04-04 12:33:21

+0

@David,它對你有用嗎?很高興它做到了,如果它確實如此:) – 2011-04-04 12:34:15

+0

是的,它看起來像預加載在Chrome中稍微複雜一點,而不僅僅是添加圖像! – 2011-04-04 12:35:22

2

事實證明,如果緩存設置不正確,Chrome會考慮HTTP緩存並在預加載後立即丟棄任何預加載的映像。

在我的情況下,我正在動態生成圖像,默認情況下響應已發送到瀏覽器,並立即過期。

要解決它,我必須設置下面的以下內容:

 Response.Cache.SetExpires(DateTime.Now.AddYears(1)); 
     Response.Cache.SetCacheability(HttpCacheability.Public); 

     return File(jpegStream, "image/jpeg"); 
+0

我正在通過PHP生成圖片,我在想爲什麼Google Chrome會丟棄預先加載的圖片。然後我發現我過去設定了過期日期。感謝信息夥伴。 – viji 2013-02-15 09:14:35