Ajax加载XML格式的图像-加载图像和淡入淡出？
我通过ajax加载了一个包含多张照片的XML文档。我的函数所经历的过程如下：
打开UL
打开一个LI
打开img标签
将src设置为= xml文档中的url (如下所示)
关闭img标签
关闭LI
打开一个LI
打开img标签
将src设置为= xml文档中的url (如下所示)
关闭img标签
关闭LI
关闭UL
它创建一个新的列表项，并为xml文档中的每个单独标记放入img标记。
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作为源来编写图像标记，然后在上面的函数中通过id获取每个元素并更改源。试一试，欢迎任何其他的解决方案。但最主要的是我需要想办法让这个坏男孩褪色。
谢谢
回答 4
Stack Overflow用户
发布于 2010-07-29 16:12:28
使用以下命令添加图像：
style="display:none;"然后，当您的函数完成添加图像时，调用jquery fade：
$('img').fadeIn('slow');Stack Overflow用户
发布于 2010-07-29 16:15:58
正如aviv所说，你应该首先设置display: none，因为.fadeIn会将图像的不透明度从当前状态设置为100%。
那loading.gif呢？
有许多方法可供选择，例如，首先可以将每个图像的src设置为loading.gif，然后在ajax请求之后，将src更改为您的图像。在这种情况下，您应该在更改每个源之前设置display: none。
或者，您可以使用其他img元素(例如，loadings)来表示绝对位置。在这种情况下，您应该在ajax请求之后将它们的样式更改为display: none。
快乐编码；)
Stack Overflow用户
发布于 2010-07-29 18:06:17
*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中从0到100的属性)
获取与新id相关的url (这是xml中的元素)。
添加到无序列表中，然后在image1 onload上运行loadNext()。
我不能让它工作:(请帮帮忙
https://stackoverflow.com/questions/3360484
复制相似问题
腾讯云开发者
