加载 GIF（预加载器）仅在 Chrome 上卡住答案

【问题标题】：Loading GIF (Preloader) gets stuck only on Chrome加载 GIF（预加载器）仅在 Chrome 上卡住
【发布时间】：2012-08-12 12:59:06
【问题描述】：

我的网站上有一个画廊。图库包含 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 上卡住（无法正常旋转），从它出现的那一刻到图库准备好。

更新： 我知道我可以实现一个更好的画廊（就像 cmets 中建议的那些），在进入画廊页面时需要用户更少的资源 -但我不明白当 GIF 加载器在 Firefox 和 IE 上完美运行时，这可能是导致问题的原因。

为什么 Ajax 加载 GIF 不能在 Chrome 上正常工作？

【问题讨论】：

加载您的网站时，它似乎按预期工作，即使在 Chrome (v21.0.1180.77 m) 中也是如此。当然，当我加载页面时，我会看到 GIF 微调器，后来它被画廊取代。我会说它相当慢，即。我没有看到微调器“旋转”，我只是在 3 或 4 个不同的位置看到它，但这大概是由于加载图库的其余部分而我的电脑有点慢。但是，我将在大约 5-6 秒内加载图库，而不是您建议的 25 秒，这样可能会影响结果。
另外，虽然我认为您绝对应该有一个 GIF 微调器，但我想知道您是否应该立即加载整个画廊，原因有两个：1）它会减慢整个页面的速度，以及 2）它会浪费带宽，因为人们可能无法查看所有图片。我将探索一个过程：1）在选择每个图像时加载每个图像（因此每个图像的 gif 微调器）或 2）加载前 3 个。然后当他们点击“下一个图像”（显示图像 2）时加载图像 4。他们不会看到任何区别，但会更快、更高效。
所以微调器卡住的原因是因为加载图库图像占用了大部分资源？我想让加载器旋转 - GIF 不是那么重，所以我不明白它为什么会卡住，我无法让它正常旋转，即使（嗯，只是）当图像被下载到计算机时。关于您的建议，这听起来是缩短等待时间并使其快速运行的好方法。我不确定哪种方式更好，但如果我使用 no'1，我必须将缩略图添加到我的画廊。
但是，仍然 - 它在 IE 上完美运行 - 加载器完美地旋转，直到画廊准备就绪 - 但在 Chrome 上却不行。一定有它在不同浏览器上表现不同的原因。
是的，很遗憾，我无法为 Chrome 问题提供任何解决方案，尤其是在我的 Chrome 版本/配置中它似乎可以正常工作（如果有点“生涩”的动作）。可能您可以尝试仅加载一两个画廊图像并查看这是否有助于正确显示内容，在这种情况下，几乎可以肯定是其他图像占用资源。遗憾的是，我对浏览器技术的了解还不够，无法说明为什么它可以在某些情况下正确加载，而在其他情况下则不能。

标签： html css google-chrome gif preloader

【解决方案1】：

你只需要在第 602 行删除这个声明：

background-attachment: fixed;

【讨论】：

我改变了它（它现在在网站上） - 但是 GIF 加载器在它出现时仍然卡住，直到画廊被加载。
终于，一个真正的解决方案！它现在完美无缺:) 我找不到任何信息说明为什么这个声明会扰乱 GIF 在 Google Chrome 上的显示和旋转方式。另外，我应该保留新的hiddenPic 属性吗？有什么区别吗？
这对我来说重要吗？我声明 <img src="images/ajax-loader.gif" alt="" class="hiddenPic" /> 是为了让浏览器在进入图库页面时尽快加载它，但我不确定它是否会有所不同，因为浏览器在 html 正文之前加载 style.css 文件，因此应用 @ 987654325@很快。

【解决方案2】：

我也遇到了同样的问题。我修复它的方法是将加载 gif 放在它自己的元素中（为了保持标记干净，使用伪元素）。

现在，您可以使用位置：固定，而不是使用背景附件规则。这是您应该使用的代码（假设您希望加载程序 gif 位于屏幕中间）：

#gallery:after {
    content: "";
    background: url(images/ajax-loader.gif);
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px; /*change to the width of your image*/
    height: 50px; /*change to the height of your image*/
    margin-left: -25px; /*Make this 1/2 the width of your image */
    margin-top: -25px; /*Make this 1/2 the height of your image */
}

希望这会有所帮助！

【讨论】：

【解决方案3】：

我a strong advocate 在这种情况和类似情况下使用dataURI 和base64 编码图像。它的作用是有效地消除了对单独的 http 请求来检索微调器 gif 的需要，这意味着“加载”动画可以立即被渲染。这使得 UX 改进的价值比额外的 KB 开销更有价值——尤其是因为样式表只会下载一次，然后由客户端缓存。

This fiddle 嵌入了来自ajaxload.info 的动画，在最终的 CSS 中添加了字面意思不到 1KB。

请注意，IE7 根本不支持这种资源嵌入（但 IE7 用户有更大的顾虑需要解决：）

【讨论】：

一般什么时候应该使用数据 URI base64 编码图像？它在哪些方面特别出色？
@amiregelz: imo 每当编码的开销比单独的连接便宜并且需要极高的响应能力时——“加载”gfx 是一个典型的例子，你不希望用户等待它加载:) 我还考虑嵌入的资源，基于它在整个站点中的使用频率，它会更加困难（应用为部分背景的图标特别困难），并且它是否比 css 声明更可取（渐变/图案需要更多空间来声明，而且与使用预渲染图形相比，还有名义上的计算开销）
我的 GIF 加载器数据 URI 代码，当使用 base64 编码时，是 painfully long。还值得用吗？我可以看到有延迟，因为解码 base64 代码需要时间，但由于代码的长度，它很慢。
@amiregelz：按照这个逻辑，我们都应该使用原始位图 :) 你的 jsfiddle 会立即为我渲染（也不是最好的硬件）。有一个decent resource covering main points，如果您需要更多信息，您应该提出一个新问题。

【解决方案4】：

您可以尝试使用 jQuery BlockUI Plugin (v2)

希望这会有所帮助。

【讨论】：

【解决方案5】：

就我个人而言，我一直都是这样做的，我不记得我在哪里读过它..但它总是对我有用..

$(函数(){ $('#overlay') 。隐藏（） .ajaxStart(函数() { $(this).css("display","inline"); }) .ajaxStop(函数() { $(this).hide(); }); });

它的作用是，它采用 id 为 overlay 的 div 并在任何发出的 AJAX 请求上使其可见，并且一旦 ajax 请求完成，它就会将其隐藏。

如果您需要更多代码，请告诉我。

干杯。

【讨论】：

【解决方案6】：

在#gallery 的 CSS 中

    background-position: center;

应该是

    background-position: center center;

您还应该尝试使用 jQuery。示例见http://yulounge.alienworkers.com/photogallery/。

【讨论】：