Question

我正在通过ajax加载包含多张照片的XML文档。我的功能经历的过程是：

打开UL
打开LI
打开img标签
将src设置为xml文档中的url（见下文）
关闭img标签
关闭李
打开李
打开img标签
将src设置为xml文档中的url（见下文）
关闭img标签
关闭李
关闭UL

它创建一个新的List项，并将img标记放在xml文档中的每个单独标记内而xml就是这个，但有更多条目：

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

和我的函数snippit处理图像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？我想的是一个simliar函数，用于将图像标签和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增加，（这是从0到100开始的xml中的attr）
获取与新id相关的url（这是xml中的元素）添加到无序列表，并在image1 onload上运行loadNext()。

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

Answer 4

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

试试这个：

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

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

4 个答案: