JQuery calls Ajax to load images

This time I will bring you JQuery to call Ajax to load images. What are the precautions for JQuery to call Ajax to load images? The following is a practical case, let's take a look.

The first idea that comes to mind is to use cache, that is, first display the prompt message, then get the picture, call back when the get is completed, and change the src of the

img tag, because it just got However, there is a cache, so the image will be displayed immediately.

Page elements:

<input>
<p>正在加载……</p>
<p>
<img  src="/static/imghwm/default1.png" data-src="jquery/jquery-1.3.2.min.js" class="lazy" alt="JQuery calls Ajax to load images" >
</p>

Button event binding:

$(".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 look carefully, it is still abnormal. The order of pictures started to jump randomly. After tracking for a long time, I found that

callback functions will be too many runs.

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

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

can be abbreviated as

$(Element).click(callback)

I thought of $(Element).bind( "load", callback) and $(Element).load(url, callback) are not the same. I checked the information but it is not very clear. I changed it and tried it, but it is still different, but it still works under chrome and ff. It works, 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:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<title>JQUERY动态加载图片</title>
<script></script>
<script>
(function($){
$.NextPic=function()
{
$(".tip").slideDown(200);
$("img").attr("src",PicArr[CurrPic]).one(&#39;load&#39;,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>


<input>
<p>正在加载……</p>
<p>
<img  alt="JQuery calls Ajax to load images" >
</p>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of jQuery AJAX implementation calling background steps

Graphic tutorial Detailed explanation of AJAX usage

The above is the detailed content of JQuery calls Ajax to load images. For more information, please follow other related articles on the PHP Chinese website!