加載GIF（預加載器）卡住在Chrome上

我在我的網站上有一個畫廊。該圖庫包含15個圖像，每個圖像大約500KB（總大小爲7.5MB）。加載GIF（預加載器）卡住在Chrome上

由於圖庫需要一段時間才能加載（我的電腦上有25秒，難以取決於連接），我希望訪問者知道圖庫正在加載，因此Ajax loading GIF。

我希望訪問者在進入圖庫頁面後立即看到加載的GIF，直到圖庫圖像被下載並準備好被查看。

爲了實現我的目標，這是我做了什麼：

這是畫廊HTML頁面的正文的開頭：

<body> 
    <img src="images/ajax-loader.gif" alt="" class="hiddenPic" /> 
    <!-- loading Ajax loading GIF before all the other images -->

並且這是畫廊CSS部分：

#gallery { 
    background: url(images/ajax-loader.gif); 
    background-repeat:no-repeat; 
    background-attachment: fixed; 
    background-position: center;

因此，基本上，只要訪問者進入圖庫頁面就應該下載加載GIF，因爲它是<body>內將要下載的第一個對象。但是，由於hiddenPic課程不可見。

這種方法應該可以幫助加載GIF儘快準備就緒，並且可以儘快顯示在圖庫背景中，直到所有圖庫圖像下載並且圖庫準備就緒。

然而，加載GIF不正常的谷歌瀏覽器工作;它在Firefox瀏覽器（完美旋轉）上運行得非常好 - 但在Chrome瀏覽器出現之前卡住（無法正常旋轉），直到畫廊準備就緒。

更新：我知道我可以實現更好的畫廊（就像在評論中提出的那些）進入圖庫頁面時將需要更少的資源從用戶 - 但我不理解這種情況當GIF加載程序在Firefox & IE上完美工作時，成爲問題的原因。

爲什麼Ajax加載GIF在Chrome上不能正常工作？

來源

2012-08-16 amiregelz

加載您的網站，即使在Chrome（v21.0.1180.77米）中，它也可以按預期工作。當然，當我加載頁面時，我會看到GIF微調，後來被畫廊取代。我會說這很慢，即。我沒有看到旋轉的「旋轉」，我只是在3或4個不同的位置看到它，但這大概是加載畫廊的其餘部分，我的電腦慢一點。但是，我會在大約5-6秒內加載畫廊，而不是您建議的25秒，以便可能會影響結果。 – Chris 2012-08-16 08:00:01

此外，當我想你絕對應該有一個GIF微調，我想知道你是否應該加載整個畫廊直線距離，有兩個原因：1）它減緩了整個頁面; 2）它浪費帶寬，因爲人們可能無法查看所有圖片。我會探索一個過程，1）加載每個圖像，當它被選中（所以gif微調爲每個圖像）或2）加載說第一個3.然後，當他們點擊'下一個圖像'（顯示圖像2）加載圖像4。他們不會看到任何區別，但使其更快，更高效。 – Chris 2012-08-16 08:03:04

因此，微調卡住的原因是因爲加載圖庫圖像佔用了大部分資源？我想讓加載程序旋轉--GIF並不那麼沉重，所以我不明白爲什麼它卡住了，我無法使它正常旋轉，即使（當然，只有）圖像被下載到計算機時。關於你的建議，這聽起來像是一個縮短等待時間並使其工作得很快的好方法。我不確定哪種方式更好，但是如果我將使用no'1，我必須將縮略圖添加到我的畫廊。 – amiregelz 2012-08-16 08:10:18

你只需要刪除線602本聲明：

background-attachment: fixed;

來源

2012-08-21 22:55:20 Knu

我改變了它（它現在在網站上直播） - 但GIF加載器仍然卡住，直到它出現，直到畫廊加載。 – amiregelz 2012-08-21 23:13:17

@amiregelz那麼我發現你的問題：檢查我的更新。 – Knu 2012-08-22 00:52:46

**最後，一個真正的解決方案！現在它的工作完美無缺：）**我找不到任何信息，但是爲什麼這個聲明會擾亂GIF在Google Chrome上顯示和旋轉的方式。另外，我應該保留新的'hiddenPic'屬性嗎？有什麼區別嗎？ – amiregelz 2012-08-22 07:26:10

您可以嘗試使用此jQuery BlockUI Plugin (v2)

希望這有助於。

來源

2012-08-19 07:24:13

-1

在CSS的#gallery

background-position: center;

應該

background-position: center center;

你也應該嘗試使用jQuery。一個例子見http://yulounge.alienworkers.com/photogallery/。

來源

2012-08-19 08:29:35 Nadim

我是a strong advocate使用dataURI與base64編碼圖像在這種和類似的情況。它所做的是有效地消除了單獨的http請求來檢索spinner gif的需要，這意味着「加載」動畫立即可用於呈現。這使得UX改進的價值比兩千多KB的開銷更有價值 - 特別是因爲樣式表只會下載一次，然後由客戶端緩存。

This fiddle已經動畫從ajaxload.info嵌入，已經增加字面上小於1KB到最終CSS。

注意，這種資源嵌入完全不支持IE7（但IE7用戶有更大的顧慮，解決:)

來源

2012-08-20 05:33:50

什麼時候應該一般使用數據URI base64編碼的圖像？它特別擅長的地方在哪裏？ – amiregelz 2012-08-22 08:23:23

@amiregelz：每當編碼的開銷比單獨的連接更便宜並且需要極高的響應速度時 - imo是一個經典的例子，你不希望用戶等待* it *加載:)我也考慮根據網站使用頻率進行嵌入的資源會使其變得更加困難（圖標作爲部分背景應用尤其困難），並且對於css聲明（漸變/模式需要更多空間來聲明）與使用預先呈現的圖形相比，它是名義上的計算開銷） – 2012-08-23 03:24:02

當使用base64編碼時，我的GIF加載器數據URI代碼是[*痛苦地長*]（http://jsfiddle.net/amiregelz/sx9Q4/）。它仍然值得使用它嗎？我可以看到有一段延遲，因爲解碼base64代碼需要時間，但由於代碼長度的原因，它很慢。 – amiregelz 2012-08-23 07:52:27

親自爲裝載機我一直在這樣做了，我不記得在那裏我讀它。但是它總是爲我工作..

 
$(function(){ 

$('#overlay') 
    .hide() 
    .ajaxStart(function() { 
     $(this).css("display","inline"); 
     }) 
    .ajaxStop(function() { 
     $(this).hide(); 
     }); 
});

它能做什麼，是它採用分度的overlay ID和上熄滅任何AJAX請求，使它可見，一旦ajax請求已完成，它將其隱藏起來。

讓我知道如果u需要更多的代碼。

乾杯。

來源

2012-08-20 14:45:25 Shrayas

你能告訴我一個這種方法的例子（例如jsFiddle）嗎？ – amiregelz 2012-08-20 15:17:54

這裏你去@amiregelz：http://jsfiddle.net/nWDUg/ – Shrayas 2012-08-21 16:03:38

我也有同樣的問題。我修正它的方法是將加載gif放入它自己的元素中（爲了保持標記清潔，使用僞元素）。

現在，您可以使用position：fixed，而不是使用background-attachment規則。下面是你應該使用的代碼（假設你會喜歡的裝載機GIF坐下就在屏幕的中間）：

#gallery:after { 
    content: ""; 
    background: url(images/ajax-loader.gif); 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 50px; /*change to the width of your image*/ 
    height: 50px; /*change to the height of your image*/ 
    margin-left: -25px; /*Make this 1/2 the width of your image */ 
    margin-top: -25px; /*Make this 1/2 the height of your image */ 
}

希望這有助於！

來源

2013-06-20 18:35:36 matthewmatician

加載GIF（預加載器）卡住在Chrome上

回答

相關問題