0

我正在通过 ajax 加载一个包含多张照片的 XML 文档。我的函数经历的过程是这样的：

打开一个 UL
打开一个 LI
打开一个 img 标签
将 src 设置为 = xml 文档中的 url（见下文）
关闭 img 标签
close LI
打开一个 LI
打开一个 img 标签
将 src 设置为 = xml 文档中的 url（见下面)
关闭 img 标签
close LI
关闭 UL

它创建一个新的列表项并将 img 标记放入 xml 文档中的每个单独标记中。
xml 是这样的，但有更多条目：

<images><image><url>0.jpg</url></image><image><url>1.jpg</url></image></images>

我处理图像 src 的函数的片段是 

for (i=0;i<x.length;i++)
      {
      txt=txt + "<li>";
      xx=x[i].getElementsByTagName("url");
        {
        try
          {txt=txt + "<img class='fade' src='" + xx[0].firstChild.nodeValue + "' />";
    }
        catch (er)
          {txt=txt + "<li class='fade'><img src='images/ajax-loader.gif' /></li>";}
        }
  txt=txt + "</li>";
      }

我的问题是，加载后如何使它们淡入淡出？我应该如何在后面添加loading.gif？我正在考虑一个类似的函数，它使用 loading.gif 作为 src 编写图像标签，然后在上面的函数中通过 id 获取每个元素并更改 src。会试一试，欢迎任何其他解决方案。但主要是我需要弄清楚如何让这个坏男孩褪色。

谢谢

4

4 回答 4

0 
   *Upate*

嗨，感谢您的回答，但我仍在为这个问题绞尽脑汁。基本上我可以让每个部分单独工作，但不能一起工作。

我无法理解的问题是：
为了能够在 loading.gif 上淡化图像，gif 必须是 bg 图像。
要加载图像，需要一个 ajax 请求，并且图像只有在通过 ajax 成功加载后才会加载到页面上。
我需要 loading.gif 来加载页面，这意味着我必须在页面上设置 100 个 LI 的空白结构。
然后我可以用它.html()来插入<img src=[url from xml file] />LI.. 是吗？但是我遇到的问题是页面在执行此操作时会冻结，并且会一次加载所有图像，而不是一次加载一个图像。

所以我想，创建一个每个img都可以运行onload的函数，它启动ajax脚本来获取下一个要加载的图像。
我不认为这很好。我在编写函数时遇到问题。
它的理论是：

image0 加载淡入，
image0 完成加载并激活loadNext()
In loadnext()：增加 id，（xml 中从 0 到 100 的一个 attr）
获取与新 id 相关的 url（xml 中的一个元素）
添加到无序列表，并loadNext()在 image1 onload 上运行。

虽然我不能让它工作:(请帮忙

于 2010-07-29T10:06:17.243 回答
0

添加图像：

 style="display:none;"

然后当你的函数完成添加图像调用 jquery fade 时：

 $('img').fadeIn('slow');
于 2010-07-29T08:12:27.760 回答
0

正如 aviv 所说，您应该display: none首先设置，因为.fadeIn将图像的不透明度从其当前状态设置为 100%。

那么loading.gif呢。

您可以采用多种方式，例如，首先您可以将src每个图像的 设置为loading.gif，然后，在 ajax 请求之后，您将更src改为您的图像。在这种情况下，您应该display: none在更改每个 src 之前进行设置。

或者，例如，您可以使用绝对位置的其他 img 元素（作为加载）。在这种情况下，您应该将它们的样式更改为display: none在 ajax 请求之后。

快乐编码；）

于 2010-07-29T08:15:58.407 回答
0

补丁不适用于drupal，但 cdn 模块适用于pressflow。

尝试这个：

themname_template_preprocess_page(){
    //regular expression for CDN call
}
于 2013-02-21T13:12:39.690 回答