Question

我的网站上有一个画廊。该图库包含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和Firefox上完美运行IE（完美无瑕地旋转） - 但是从Chrome出现的那一刻起到画廊准备好的那一刻，它就会在Chrome上卡住（无法正常旋转）。

更新： 我知道我可以在进入图库页面时实现更好的图库（如评论中建议的那样），这将需要用户更少的资源 - 但我不明白当GIF加载程序在Firefox和Linux上完美运行时，这可能是导致问题的原因。 IE浏览器。

为什么Ajax加载GIF在Chrome上无法正常运行？

Answer 1

您只需要在第602行删除此声明：

background-attachment: fixed;

Answer 2

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

现在，您可以使用position：fixed来代替使用背景附件规则。这是您应该使用的代码（假设您希望加载器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 */
}

希望这有帮助！

Answer 3

我a strong advocate在这种情况和类似情况下使用dataURI和base64编码的图片。它的作用是有效地消除了单独的http请求来检索spinner gif的需要，这意味着可以立即呈现“加载”动画。这使得UX改进的价值比开销中的几千字节更有价值 - 特别是因为样式表只下载一次然后由客户端缓存。

This fiddle从ajaxload.info嵌入了动画，在最终的CSS中添加了字面小于1KB。

请注意，IE7上根本不支持这种资源嵌入（但IE7用户需要解决的问题要多得多）。

Answer 4

您可以使用 jQuery BlockUI Plugin (v2)

尝试此操作

希望这有帮助。

Answer 5

个人对于装载者我总是这样做，我不记得我在哪里阅读..但它总是对我有用..

$(function(){

$('#overlay')
    .hide()  
    .ajaxStart(function() {
        $(this).css("display","inline");
        })
    .ajaxStop(function() {
        $(this).hide();
        });
});

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

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

干杯。

Answer 6

在#gallery的CSS中

    background-position: center;

应该是

    background-position: center center;

您还应该尝试使用jQuery。有关示例，请参阅http://yulounge.alienworkers.com/photogallery/。

加载GIF（预加载器）只会卡在Chrome上

6 个答案: