Home > Article > Web Front-end > JQuery implements Ajax method of loading images_jquery

JQuery implements Ajax method of loading images_jquery

WBOYOriginal: 2016-05-16 15:23:441514browse

The example in this article describes how JQuery implements Ajax loading of images. Share it with everyone for your reference, the details are as follows:

I am learning JQuery recently and want to simulate the principle of browsing the photo album without refreshing.

The first idea that comes to mind is to use the cache, that is, first display the prompt message, and then get the picture. When the get is completed, call back and change the src of the img tag. Since it has just been obtained and there is a cache, the picture will be Shown immediately.

Page elements:

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

Button event binding:

Copy code The code is as follows:

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

An array PicArr is defined to record all pictures

NextPic content:

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

The display is normal under CHROME and FF, but abnormal under IE6. IE7 and 8 have not been tested.

Later, with the help of ASPRAIN developer Ji Shancao, the idea was changed to changing src first, then binding the onload event and calling back in onload.

Core code:

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

Later I saw that it was basically normal, but if I looked closely it was still abnormal. The order of pictures started to jump randomly. After tracking for a long time, I found that the callback function would run multiple times.

I thought it might be a problem with event binding, because the binding of onclick event is

Copy code The code is as follows:

$(Element).bind("click",callback)

can be abbreviated Into

Copy code The code is as follows:

$(Element).click(callback)

think of $(Element) Will .bind("load",callback) and $(Element).load(url,callback) be the same? I couldn't find the information clearly. I changed it and tried it, but it's still different. But in chrome and ff It can still work under IE, but the data is not normal and an error is reported under IE.

Check the code given by Jishancao again and find out where the problem lies.

The load event is bound to an anonymous function, and it will be bound again when the button is pressed, so it will be executed repeatedly. So I changed the binding bind to one and it was done. The final complete code is as follows:

<!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>

I hope this article will be helpful to everyone in jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Client shopping cart operation example implemented by jquery.cookieNext article：Client shopping cart operation example implemented by jquery.cookie

See more

JQuery implements Ajax method of loading images_jquery

Related articles