0

私は多くの画像を使用するプロジェクトに取り組んでおり、画像の多くは PNG 形式であり、ダウンロードに時間がかかります。一般的なgifファイルである基本的な画像背景画像タグを使いたいです。

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

ASP.NET HTML (例: これはリピーター コントロールの一部です。

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

これは、Firefox で Image Container が表示されることを除いて、すべてのブラウザーで非常に有効です。

FireFox およびその他のブラウザでの結果は、下の画像に示されています。 結果は FireFox 結果は FireFox

IE、Chrome Safari での結果 IE、Chrome Safari での結果

私にとっては正常に機能していますが、FFに表示される画像アイコンを非表示にする方法がわかりません。他のブラウザではうまく表示されます。

ダウンロード中の画像に進行状況バーを追加する最良の方法は何ですか、またはこれを修正するにはどうすればよいですか

4

1 に答える 1

0

Tim B James が提案するように、画像が読み込まれるまで画像を非表示にする必要があります。ただし、その結果、背景画像も表示されなくなります。これにはちょっとした回避策が必要です。

アイデアは、背景の読み込み画像を含むコンテナーを使用し、そこに実際の画像を配置することです。画像がまだ読み込まれている (したがって表示されていない) 間、このコンテナーの背景画像が表示されます。

最初に、ロードする必要があるイメージを非表示にし (visibility : hidden)、このイメージに 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-19T12:54:09.160 に答える