blocks|key|665233|text|使用以下命令添加图像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665234|+style="display:none;"|code-block|syntax|javascript|665235|然后，当您的函数完成添加图像时，调用jquery+fade：|665236|+$('img').fadeIn('slow');|665237|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Add the images with:

<pre><code> style="display:none;"
</code></pre>

And then when your function finishes adding the images call jquery fade:

<pre><code> $('img').fadeIn('slow');
</code></pre>

blocks|key|933486|text|正如aviv所说，你应该首先设置display:+none，因为.fadeIn会将图像的不透明度从当前状态设置为100%25。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|933487|那loading.gif呢？|933488|有许多方法可供选择，例如，首先可以将每个图像的src设置为loading.gif，然后在ajax请求之后，将src更改为您的图像。在这种情况下，您应该在更改每个源之前设置display:+none。|933489|或者，您可以使用其他img元素(例如，loadings)来表示绝对位置。在这种情况下，您应该在ajax请求之后将它们的样式更改为display:+none。|933490|快乐编码；)|933491|entityMap^0|G|D|W|7|0|0|N|3|T|B|1I|3|2D|D|0|1S|D|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|17|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|O|$]]

As aviv says, you should set the <code>display: none</code> at first, because <code>.fadeIn</code> animates the opacity of image from it's current state to 100%.

And what about loading.gif.

there are many ways you can go, for example at firts you can set the <code>src</code> of each image to <code>loading.gif</code>, and then, after ajax request, you will change the <code>src</code> to your image. in this case you should set <code>display: none</code> before changing each src.

Or you can have other img elements(as loadings) with position absolute for example. In this case you should change their style to <code>display: none</code> after ajax request.

happy coding;)

blocks|key|665305|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665306|+++*Upate*|code-block|syntax|javascript|665307|665308|嗨，谢谢你的回答，但我仍然在绞尽脑汁地思考这个问题。基本上，我可以让每个部分单独工作，但不是全部在一起。|665309|我想不通的问题是：|665310|为了能够在loading.gif上淡入淡出图像，gif需要是bg图像。|665311|要加载图像，需要一个ajax请求，并且图像只有在通过ajax成功加载后才会加载到页面上。|665312|我需要loading.gif来加载页面，这意味着我必须在页面上设置一个包含100个LI的空白结构。|665313|然后，我可以使用.html()将<img+src=[url+from+xml+file]+/>插入到LI中。是?但我遇到的问题是，页面在执行此操作时冻结，它一次加载所有图像，而不是一次加载一个图像。|offset|length|style|CODE|665314|所以我想，创建一个每个img都可以在onload上运行的函数，该函数启动ajax脚本以加载下一个图像。|665315|我不认为这很好。我在编写函数时遇到了问题。|665316|它的理论是：|665317|image0加载和淡入，|665318|image0完成加载并激活loadNext()|665319|在loadnext()中:+id增加(这是xml中从0到100的属性)|665320|获取与新id相关的url+(这是xml中的元素)。|665321|添加到无序列表中，然后在image1+onload上运行loadNext()。|665322|我不能让它工作:(请帮帮忙|665323|entityMap^0|0|0|0|0|0|0|0|0|8|7|G|V|0|0|0|0|0|D|A|0|1|A|0|0|S|A|0|0^^$0|@$1|2|3|-4|4|5|6|1G|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1H|7|@]|8|@]|9|$D|E]]|$1|F|3|-4|4|5|6|1I|7|@]|8|@]|9|$]]|$1|G|3|H|4|5|6|1J|7|@]|8|@]|9|$]]|$1|I|3|J|4|5|6|1K|7|@]|8|@]|9|$]]|$1|K|3|L|4|5|6|1L|7|@]|8|@]|9|$]]|$1|M|3|N|4|5|6|1M|7|@]|8|@]|9|$]]|$1|O|3|P|4|5|6|1N|7|@]|8|@]|9|$]]|$1|Q|3|R|4|5|6|1O|7|@$S|1P|T|1Q|U|V]|$S|1R|T|1S|U|V]]|8|@]|9|$]]|$1|W|3|X|4|5|6|1T|7|@]|8|@]|9|$]]|$1|Y|3|Z|4|5|6|1U|7|@]|8|@]|9|$]]|$1|10|3|11|4|5|6|1V|7|@]|8|@]|9|$]]|$1|12|3|13|4|5|6|1W|7|@]|8|@]|9|$]]|$1|14|3|15|4|5|6|1X|7|@$S|1Y|T|1Z|U|V]]|8|@]|9|$]]|$1|16|3|17|4|5|6|20|7|@$S|21|T|22|U|V]]|8|@]|9|$]]|$1|18|3|19|4|5|6|23|7|@]|8|@]|9|$]]|$1|1A|3|1B|4|5|6|24|7|@$S|25|T|26|U|V]]|8|@]|9|$]]|$1|1C|3|1D|4|5|6|27|7|@]|8|@]|9|$]]|$1|1E|3|-4|4|5|6|28|7|@]|8|@]|9|$]]]|1F|$]]

<hr>

<pre><code> *Upate*
</code></pre>

<hr>

Hi, thanks for the answers but I am still racking my brain over this problem.
basically i can get each part to work seperatly, but not all together.

The problem I cannot get my head around is this: 
To be able to fade the image ontop of the loading.gif, the gif needs to be a bg image. 
To load the images, an ajax request is needed and images are only loaded on the page once they have successfully loaded via ajax. 
I need the loading.gif's to load with the page, which means I have to set up a blank structure of 100 LI's on the page. 
I can then use <code>.html()</code> to insert the <code>&lt;img src=[url from xml file] /&gt;</code> into the LI.. yes?
But the problem I am having is that the page freezes while it is doing this and it loads all the images at once as opposed to one at a time.

So I thought, create a function that each img can run onload, which starts the ajax script to get the next image to load. 
I don't think this is great. And I am having a problem writing the function. 
Theory of it goes: 

image0 loads and fades in, 
image0 completes loading and activates <code>loadNext()</code> 
In <code>loadnext()</code> : 
the id is increased, (which is an attr in the xml starting 0 to 100) 
get the url (which is an element in xml) relevant to the new id 
add to the unordered list, and run <code>loadNext()</code> on image1 onload.

I cant get it to work though :(
help please

blocks|key|927020|text|补丁不会在drupal上工作，但是cdn模块可以与pressflow一起工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|927021|试试这个：|927022|themname_template_preprocess_page(){
++++//regular+expression+for+CDN+call
}|code-block|syntax|javascript|927023|entityMap^0|5|6|P|9|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Patches will not work on drupal, however cdn module works with pressflow.

Try this:

<pre><code>themname_template_preprocess_page(){
 //regular expression for CDN call
}
</code></pre>

I am loading in an XML document with multiple photos in it, via ajax.
The process my function goes through is this:

Open a UL 
Open a LI 
Open an img tag 
set the src to = the url in the xml document (see below) 
close img tag 
close LI 
open a LI 
open an img tag 
set the src to = the url in the xml document (see below) 
close img tag 
close LI 
close UL

It creates a new List item and puts the img tag inside for each individual tag in the xml document. 
And the xml is this, but with more entries:

<pre><code>&lt;images&gt;&lt;image&gt;&lt;url&gt;0.jpg&lt;/url&gt;&lt;/image&gt;&lt;image&gt;&lt;url&gt;1.jpg&lt;/url&gt;&lt;/image&gt;&lt;/images&gt;
</code></pre>

and a snippit of my function that deals with the image src is 

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

My question is, how do I make these fade in once they have been loaded? and how should i go about adding the loading.gif's behind? I was thinking of a simliar function that writes image tags with loading.gif as the src, then in the function above getting each element by id and changing the src. gonna give this a go, any other soltions welcome. But mainly i need to work out howo to fade this bad boy.

thanks

Ajax loading images in XML - loading image and fade?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我通过ajax加载了一个包含多张照片的XML文档。我的函数所经历的过程如下：打开UL打开一个LI打开img标签将src设置为= xml文档中的url (如下所示)关闭img标签关闭LI打开一个LI打开img标签将src设置为= xml文档中的url (如下所示)关闭img标签关闭LI关闭UL它创建一个新的列表项，并为x...

问Ajax加载XML格式的图像-加载图像和淡入淡出？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ajax加载XML格式的图像-加载图像和淡入淡出？EN