Rumah >hujung hadapan web >tutorial js >JQuery melaksanakan kaedah Ajax untuk memuatkan images_jquery

JQuery melaksanakan kaedah Ajax untuk memuatkan images_jquery

WBOYasal: 2016-05-16 15:23:441591semak imbas

Contoh dalam artikel ini menerangkan cara JQuery melaksanakan pemuatan imej Ajax. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Saya sedang belajar JQuery baru-baru ini dan ingin mensimulasikan prinsip menyemak imbas album foto tanpa menyegarkan.

Idea pertama yang terlintas di fikiran ialah menggunakan cache, iaitu, mula-mula memaparkan mesej gesaan, dan kemudian dapatkan gambar Apabila get selesai, hubungi semula dan tukar src tag img Sejak itu baru diperolehi dan ada cache, gambar akan ditunjukkan serta-merta.

Unsur halaman:

<input class="picbtn" type="button" value="Next" />
<div class="tip">正在加载……</div>
<div class="notice">
<img />
</div>

Ikatan acara butang:

Salin kod Kod adalah seperti berikut:

$(".picbtn").click(function(){NextPic (); });

Tatasusunan PicArr ditakrifkan untuk merakam semua gambar

Kandungan NextPic:

$(".tip").slideDown(200); //显示提示
$.get(PicArr[CurrPic],function(){
$("img").attr("src",PicArr[CurrPic]);
$(".tip").slideUp(200);
CurrPic++;
if(CurrPic>4)
CurrPic=0;
});

Paparan adalah normal di bawah CHROME dan FF, tetapi tidak normal di bawah IE7 dan 8 belum diuji.

Kemudian, dengan bantuan pembangun ASPRAIN Ji Shancao, idea itu ditukar kepada menukar src dahulu, kemudian mengikat acara onload dan memanggil semula onload.

Kod teras:

$("img").attr("src",PicArr[CurrPic]) 
.bind('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});

Kemudian saya melihat bahawa ia pada asasnya normal, tetapi jika saya melihat dengan teliti ia masih tidak normal.

Saya fikir ia mungkin menjadi masalah dengan pengikatan acara, kerana pengikatan acara onclick ialah

Salin kod Kod adalah seperti berikut:

$(Element).bind("klik",panggilan balik)

boleh disingkatkan menjadi

Salin kod Kod tersebut adalah seperti berikut:

$(Element).klik(panggilan balik)

Fikirkan $(Element) Adakah .bind("load",callback) dan $(Element).load(url,callback) akan sama? Saya tidak dapat mencari maklumat dengan jelas. tetapi ia masih berbeza Tetapi dalam chrome dan ff Ia masih boleh berfungsi di bawah IE, tetapi datanya tidak normal dan ralat dilaporkan di bawah IE.

Semak kod yang diberikan oleh Jishancao sekali lagi dan ketahui di mana masalahnya.

Acara pemuatan terikat pada fungsi tanpa nama, dan ia akan diikat semula apabila butang ditekan, jadi ia akan dilaksanakan berulang kali. Jadi saya menukar ikatan mengikat kepada satu dan ia telah selesai. Kod lengkap akhir adalah seperti berikut:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQUERY动态加载图片</title>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
(function($){
$.NextPic=function()
{
$(".tip").slideDown(200);
$("img").attr("src",PicArr[CurrPic]).one('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});
//$("img").load(PicArr[CurrPic],function(){$(this).attr("src",PicArr[CurrPic]);$(".tip").slideUp(200);alert(CurrPic);CurrPic++;if(CurrPic>4)CurrPic=0;});
}
})(jQuery);
$(document).ready(function(){
PicArr = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");
CurrPic=0;
$(".tip").css({"position":"absolute","top":"100px","left":"50px"});
$(".tip").hide();
$(".scoll").click(function(){$.NextPic();});
})
</script>
</head>
<body>
<input class="picbtn" type="button" value="Next" />
<div class="tip">正在加载……</div>
<div class="notice">
<img id="img"/>
</div>
</body>
</html>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Contoh operasi troli beli-belah pelanggan yang dilaksanakan oleh jquery.cookieArtikel seterusnya：Contoh operasi troli beli-belah pelanggan yang dilaksanakan oleh jquery.cookie

Artikel berkaitan

Lihat lagi