我的网站上有一个画廊。该图库包含 15 张图片，每张约 500KB（总大小为 7.5MB）。
因为图库需要一段时间才能加载（在我的计算机上需要 25 秒，这取决于连接情况），我希望访问者知道图库正在加载，因此Ajax 加载 GIF.
我希望访问者一进入图库页面就看到正在加载的 GIF，直到图库图像下载完毕并准备好查看。
为了实现我的目标，这就是我所做的：
这是画廊 HTML 页面正文的开头：
<body>
<img src="images/ajax-loader.gif" alt="" class="hiddenPic" />
<!-- loading Ajax loading GIF before all the other images -->
这是画廊 CSS 部分：
#gallery {
background: url(images/ajax-loader.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
所以基本上，加载 GIF 应该在访问者进入图库页面时立即下载，因为它是图库页面中的第一个对象<body>即将被下载。但是，由于以下原因，它不可见hiddenPic class.
此方法应该有助于尽快准备好加载 GIF 并作为图库背景可见，直到所有图库图像都已下载且图库准备就绪。
However，加载 GIF 在 Google Chrome 上无法正常工作；它在 Firefox 和 IE 上运行得非常好（完美旋转） - 但在 Chrome 上却卡住了（无法正常旋转），从它出现的那一刻起直到图库准备好。
Update:我知道我可以实现一个更好的画廊（就像评论中建议的那样），这在进入画廊页面时需要用户提供更少的资源 - 但我不明白当 GIF 加载器时这如何成为问题的原因在 Firefox 和 IE 上完美运行。
为什么 Ajax 加载 GIF 在 Chrome 上无法正常工作？
