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

Question

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

打开一个 UL
打开一个 LI
打开一个 img 标签
将 src 设置为 = xml 文档中的 url（见下文）
关闭 img 标签
关闭李
打开一个 LI
打开一个 img 标签
将 src 设置为 = xml 文档中的 url（见下文）
关闭 img 标签
关闭李
关闭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 必须是 bg 图像。
要加载图像，需要一个 ajax 请求，并且只有在通过 ajax 成功加载图像后才会在页面上加载图像。
我需要 loading.gif 与页面一起加载，这意味着我必须在页面上设置 100 个 LI 的空白结构。
然后我可以使用.html() 将<img src=[url from xml file] /> 插入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
}