剛開始學習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