9

我的网站上有一个画廊。图库包含 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课程原因，它不可见。

此方法应有助于尽快使加载的 GIF 准备就绪并作为图库背景可见，直到所有图库图像都已下载并且图库已准备好。

但是，加载 GIF 在 Google Chrome 上无法正常工作；它在 Firefox 和 IE 上运行良好（旋转完美） - 但在 Chrome 上卡住（无法正常旋转），从它出现的那一刻起直到画廊准备好。

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

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

4

6 回答 6

5

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

background-attachment: fixed;
于 2012-08-21T22:55:20.170 回答
3

我也有同样的问题。我修复它的方法是将加载 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 */
}

希望这可以帮助！

于 2013-06-20T18:35:36.280 回答
1

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

这个小提琴从ajaxload.info嵌入了动画，在最终的 CSS 中添加了不到 1KB 的空间。

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

于 2012-08-20T05:33:50.803 回答
0

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

$(函数(){

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

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

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

干杯。

于 2012-08-20T14:45:25.940 回答
0

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

希望这可以帮助。

于 2012-08-19T07:24:13.060 回答
-1

在#gallery 的 CSS 中

    background-position: center;

应该

    background-position: center center;

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

于 2012-08-19T08:29:35.957 回答