刚开始学习jQuery中的Ajax()函数。试图制作一个小部件,图像加载器将出现,直到图像从服务器加载。通过ajax调用加载图像,同时显示加载器图像
我想对这些李的所有图像应用相同的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
li { padding: 10px; }
ul.imageList li .pics { height: 50px; width:50px; }
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#click').click(function(event) {
event.preventDefault();
$(".imageList li").html('<img src="http://deltaplanveter.ru/app/webroot/img/loader.gif" />');
$(".imageList li").load('1.png');
});
});
</script>
</head>
<body>
<div class="images">
<ul class="imageList">
<li><img src="1.png" class="pics" /></li>
<li><img src="2.png" class="pics" /></li>
<li><img src="3.png" class="pics" /></li>
<li><img src="4.png" class="pics" /></li>
</ul>
<a href="#" id="click">Show Images</a>
</div>
</body>
</html>
请点击这里查看我的生活代码 http://jsfiddle.net/ylokesh/cZ6F7/
谢谢! LOKESH亚达夫
感谢鲍里斯,你的代码为我工作。我们不能放置$(ajax())从服务器获取图像,然后通过删除加载程序图像' – 2011-03-01 11:12:07
将原始图像附加到容器当然,您可以使用Ajax加载图像,检查我的更新答案。 – 2011-03-01 11:13:12
好的。我正在尝试谷歌找到任何相关的网站,以获得正确的想法..如何使用Ajax实现这种情况。如果你有任何网站的网址可以提供一些见解..请分享:) – 2011-03-01 11:24:29