圖像正在下載網站中的圖像進度條不正確的結果在FF

我正在使用大量圖像的項目，使用PNG格式，需要時間下載。我想使用基本的圖像背景圖像標籤，這是一個普通的gif文件。圖像正在下載網站中的圖像進度條不正確的結果在FF

.ArticleImgHP 
{ 
    display: block; 
    background-image: url('../images/loading-circle.gif'); 
    background-position: center center; 
    background-repeat:no-repeat; 
}

ASP.NET HTML（示例：這是Repeater控件的一部分

<asp:Image ID="imgTopFourImg2" runat="server" width="170px" height="112px" CssClass="ArticleImgHP" border="0" ImageUrl='<%# getImagePath(Eval("ArticleThumNailImage")) %>'/>

這挺將在所有瀏覽器，除了它拿出圖像容器在Firefox

結果在Firefox瀏覽器。和其他瀏覽器顯示在下面的圖片中 結果In FireFox Result In FireFox

結果在IE，Safari瀏覽器的Chrome Result In IE, Chrome Safari

它工作正常的我，但我不知道如何來隱藏圖像圖標哪來出現在FF。在其他瀏覽器上它很好地出現。

什麼是添加進度條的圖像被下載最好的辦法還是如何解決這一

來源

2012-04-19 Learning

就隱藏圖像，直到它已載入？ – 2012-04-19 11:44:19

@Tim：如果我將隱藏也會隱藏動畫gif文件的圖像。 – Learning 2012-04-19 12:50:16

蒂姆乙詹姆斯建議，你應該隱藏圖像，直到它已被加載。因此，背景圖像將不再可見。你需要一個小的解決方法。

想法是使用一個包含背景加載圖像的容器，並將實際圖像放在那裏。當圖像仍在加載（因此不可見）時，它將顯示此容器的背景圖像。

最初，您將隱藏必須加載的圖像（可見性：隱藏），並將onload事件放在此圖像上。 onload函數將使圖像可見，一旦它被加載並自動隱藏容器的背景圖像。

該解決方案的上述說明中，下面的代碼計算出：

<html> 
<head> 
    <title>Test file</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function onLoadFunction(img) { 
     $(img).css("visibility", "visible"); // Using jQuery 
     // img.style.visibility = "visible"; // Using just javascript. 
     } 
    </script> 
    <style> 
     img.ArticleImgHP { 
      /* Set the width and height to the size of its container */ 
      width : 100%; 
      height : 100%; 
      visibility : hidden; 
     } 
     div.ArticleImgHP-container { 
      width : 124px; 
      height : 124px; 
      background-image : url('http://www.speikboden.it/_medien/bilder/loader2.gif'); 
      background-position: center center; 
      background-repeat: no-repeat; 
     } 
    </style> 
</head> 
<body> 
    <!-- This container contains the background loading image --> 
    <div class="ArticleImgHP-container"> 
     <!-- An huge image which has to be loaded --> 
     <img class="ArticleImgHP" src="http://www.lzsu.com/uploads/Big-Wave-Wallpaper.jpg" onload="onLoadFunction(this);"/> 
    </div> 
</body> 
</html>

來源

2012-04-19 12:54:09 dennisg

我在JSFiddle中嘗試過，它不工作http://jsfiddle.net/v6CLG/6/ – Learning 2012-04-19 12:58:42

將它放入計算機上的HTML文件中，並在瀏覽器中打開它。在Firefox，Chrome和IE測試，所有作品。我不確定爲什麼它在JSFiddle中不起作用。 – dennisg 2012-04-19 13:03:02

另外，您在JSFiddle中添加的不包含ArticleImgHP類，也不包含onload事件。 – dennisg 2012-04-19 13:06:51

圖像正在下載網站中的圖像進度條不正確的結果在FF

回答

相關問題