1

画像の読み込み中にアニメーション GIF を表示したいのですが、CSS を使用してこれを行いたいと考えています。（例：可能であればJSなし）。

 <img src="images/users/girl1.png" class="thumbnailPreLoader memberImage"/>


 .thumbnailPreLoader {
     background: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9;
     height: 101px;
     width: 101px;
     position: relative;
 }


 div#preferredMembers img.memberImage {
     border: 1px solid #808080;
     padding: 3px;
 }

上記は私が現在取り組んでいるもので、www.datingjapan.co で見ることができます (5 枚のサムネイル画像のセット)。

現在、GIFが表示されないことがわかりました。

クロム開発者モードに入ってimgのパスを変更すると、GIFが表示されるので、パスなどが正しいことがわかります。

これは可能ですか？私が見逃しているトリックはありますか？どんな助けでも大歓迎です。

注: jquery .load() でこれを行う方法は知っていますが、CSS クラスをアタッチする方がはるかに適しています。

どうも

4

1 に答える 1

2

ここでは必須scrollでbackground: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9;はありません。それは私のクロムインスペクターで問題を解決しました...

于 2012-08-20T00:17:48.273 に答える