Ajax 在 XML 中加载图像 - 加载图像并淡入淡出？

Question

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

打开 UL
开设 LI
打开 img 标签
将 src 设置为 = xml 文档中的 url（见下文）
关闭 img 标签
关闭李
开设 LI
打开 img 标签
将 src 设置为 = xml 文档中的 url（见下文）
关闭 img 标签
关闭李
close 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。尝试一下，欢迎任何其他解决方案。但主要是我需要弄清楚如何让这个坏男孩消失。

谢谢

Answer 1

添加图像：

 style="display:none;"

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

 $('img').fadeIn('slow');

Answer 2

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

那么loading.gif 又如何呢？

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

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

快乐编码；）

Answer 3

---

   *Upate*

---

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

我无法解决的问题是：
为了能够淡出loading.gif 上的图像，该 gif 必须是背景图像。
要加载图像，需要一个ajax请求，并且图像只有在通过ajax成功加载后才会加载到页面上。
我需要将loading.gif 与页面一起加载，这意味着我必须在页面上设置一个包含 100 个 LI 的空白结构。
然后我可以使用 .html() 将 插入 LI.. 是吗？
但我遇到的问题是，页面在执行此操作时会冻结，并且会立即加载所有图像，而不是一次加载一个图像。

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

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

但我无法让它工作:(
请帮忙

Answer 4

补丁不适用于 drupal，但 cdn 模块可与 pressflow 配合使用。

试试这个：

themname_template_preprocess_page(){
    //regular expression for CDN call
}