奇怪的谷歌鉻圖像錯誤

Question

我似乎無法找到這個相當有趣的問題的答案。在谷歌瀏覽器中，具有設置寬度和/或高度的圖像（使用屬性，內聯樣式或CSS樣式）在初始加載時拒絕顯示在頁面上。他們似乎只在出現一些頁面活動後出現。但是，如果您讓圖片加載到自然大小，則它們在網頁加載時顯示效果會非常好。這些圖像可以被看作是在其他瀏覽器中工作，並且在檢查鉻中的元素時，圖像顯示在彈出窗口中。

任何知道如何解決這個問題？

Answer 1

定義你的意思是：'在一些頁面活動之後'。

你也提到過，當你設置寬度和/或高度時，會發生這種情況，這導致我相信你的一些測試你的ommiting寬度或高度，因此它可以由瀏覽器計算。如果是這種情況，那麼圖像永遠看起來不正確，並且在初始頁面加載時元素將沒有大小。直到圖像被下載，瀏覽器檢查圖像並確定缺少的尺寸以創建邊界框。

編輯：

看你的在線網站後，我之前的評論解釋了它的要點，但我可以看到你設置「自動」的寬度需要瀏覽器首先加載圖像和檢測大小。這將導致瀏覽器渲染延遲「重排」。設置寬度和高度，否則需要通過客戶端瀏覽器進行計算。如果你沒有這麼好的電腦，它看起來呆滯。在我的系統上，如果我硬刷新沒有緩存有時我得到所有的拇指和其他時間，我沒有和延遲是非常明顯的。

因此總之，您的圖片總是有寬度和高度。

編輯：

您也有一些404錯誤，可能會導致一些延遲。 http://www.webpagetest.org/result/120725_0C_3N6/1/details/

編輯：

我認爲你唯一的選擇是如此的它加載在儘可能快的將被呈現給由它獲得了更高的下載資源的第一順序加載背景圖片。 一個技巧可能是將bg圖像加載到隱藏的div中以便馬上預加載，以便瀏覽器首先下載它。即使你這樣做，你應該期望看到一些黑色背景閃光，而你等待高分辨率鏡頭下載並加載。無論如何不能在背景圖像上設置寬度和高度。進一步，您可以加快響應時間，也許可以通過在加載頁面後加載AJAX調用來加載所有縮略圖，以便它們甚至不會與大照片拍攝競爭，並開始下載，直到dom完全加載。你甚至可以在這裏放置一個很好的效果，可能會縮小縮略圖加載或某種效果。