Question

我希望在加载图片时显示动画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。

如果我进入chrome开发者模式并更改img的路径，我可以看到GIF，所以我知道路径等是正确的。

这可能吗？有缺点我不知道吗？任何帮助将不胜感激。

注意：我知道如何使用jquery .load（）来完成此操作，但只需附加一个CSS类就可以了。

THX

Answer 1

尝试删除scroll中的background: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9;这里不需要。它解决了我的chrome检查员的问题...

在<img/>加载时CSS +显示动画GIF

1 个答案: