我的网站上有一个画廊。图库包含 15 张图片，每张约 500KB(总大小为 7.5MB)。
因为画廊需要一段时间才能加载(在我的电脑上需要 25 秒，这取决于网络连接)，我希望访问者知道画廊正在加载，因此 Ajax loading 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，它不可见类。
此方法应有助于使正在加载的 GIF 准备就绪并尽快作为画廊背景可见，直到所有画廊图像都已下载并且画廊已准备就绪。
但是，加载中的 GIF 在 Google Chrome 上无法正常工作；它在 Firefox 和 IE 上运行良好(完美旋转)- 但在 Chrome 上卡住了(无法正常旋转)，从它出现的那一刻到画廊准备就绪。
更新: 我知道我可以实现一个更好的图库(就像评论中建议的那样)，这将在用户进入图库页面时需要更少的资源 -但我不明白当 GIF 加载器在 Firefox 和 IE 上完美运行时，这可能是问题的原因。
为什么 Ajax 加载 GIF 在 Chrome 上无法正常工作？
最佳答案
你只需要在第 602 行删除这个声明:
background-attachment: fixed;
关于html - 加载 GIF(预加载器)仅在 Chrome 上卡住，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11982733/