加载GIF（预加载器）只会在Chrome上停滞 [英] Loading GIF (Preloader) gets stuck only on Chrome
问题描述
我在我的网站上有一个图库。图库包含15张图片，每张图片大约500KB（总大小为7.5MB）。
I have a gallery in my website. The gallery contains 15 images, each one of them is approximately 500KB (total size is 7.5MB).
由于图库需要一段时间才能加载（我的计算机上25秒，这取决于连接），我想访问者知道图库正在加载 Ajax加载GIF 。
Because the gallery takes a while to load (25 seconds on my computer, tough it depends on the connection), I want the visitor to know the gallery is loading, hence the Ajax loading GIF.
我希望访问者在进入图库页面时看到加载的GIF，直到图库图像已下载并可以查看
为了达到我的目标，这是我所做的：
In order to achieve my goal, this is what I've done:
这是图库HTML页面正文的开头：
This is the beginning of the body of the gallery HTML page:
<body>
<img src="images/ajax-loader.gif" alt="" class="hiddenPic" />
<!-- loading Ajax loading GIF before all the other images -->
这是画廊CSS部分：
$ b
And this is the gallery CSS part:
#gallery {
background: url(images/ajax-loader.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
因此，基本上，一旦访问者进入图库页面，就应该下载加载GIF是将要下载的< body> 中的第一个对象。但是，由于 hiddenPic 类不可见。
So basically, the loading GIF should be downloaded as soon as a visitor enters the gallery page, because it is the first object inside the <body> that is going to be downloaded. However, it's not visible due to the hiddenPic class.
此方法应该有助于加载GIF
This method should help making the loading GIF ready and visible as the gallery background as soon as possible, until all the gallery images have been downloaded and the gallery is ready.
>更新： 我知道我可以实现一个更好的画廊（如评论中建议的），这将需要更少的资源，从用户进入图库页面 - 但我不明白如何可能是问题的原因，当GIF加载器在Firefox& IE。
Update: I know I can implement a better gallery (like the ones suggested in the comments) which would require less resources from the user when entering the gallery page - but I don't understand how this can be the cause for the problem when the GIF loader works perfectly on Firefox & IE.
为什么Ajax不能在Chrome上正常加载GIF？
推荐答案
您只需在第602行删除此声明：
You just need to delete this declaration on line 602:
background-attachment: fixed;
这篇关于加载GIF（预加载器）只会在Chrome上停滞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![Ajax加载GIF](\"http://i.stack.imgur.com/UUjhE.gif\"){kind=link}