JQuery calls Ajax to load images-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JQuery calls Ajax to load images

Apr 24, 2018 pm 03:56 PM

ajax jquery picture

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:

&lt;input class=&quot;picbtn&quot; type=&quot;button&quot; value=&quot;Next&quot; /&gt;
&lt;p class=&quot;tip&quot;&gt;正在加载……&lt;/p&gt;
&lt;p class=&quot;notice&quot;&gt;
&lt;img /&gt;
&lt;/p&gt;

Copy after login

Button event binding:

$(&quot;.picbtn&quot;).click(function(){NextPic();});

Copy after login

An array PicArr is defined to record all pictures

NextPic content:

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

Copy after login

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:

$(&quot;img&quot;).attr(&quot;src&quot;,PicArr[CurrPic]) 
.bind(&#39;load&#39;,function(){$(&quot;.tip&quot;).slideUp(200);CurrPic++;if(CurrPic&gt;4)CurrPic=0;});

Copy after login

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(&quot;click&quot;,callback)

Copy after login

can be abbreviated as

$(Element).click(callback)

Copy after login

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:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;
&lt;title&gt;JQUERY动态加载图片&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
(function($){
$.NextPic=function()
{
$(&quot;.tip&quot;).slideDown(200);
$(&quot;img&quot;).attr(&quot;src&quot;,PicArr[CurrPic]).one(&#39;load&#39;,function(){$(&quot;.tip&quot;).slideUp(200);CurrPic++;if(CurrPic&gt;4)CurrPic=0;});
//$(&quot;img&quot;).load(PicArr[CurrPic],function(){$(this).attr(&quot;src&quot;,PicArr[CurrPic]);$(&quot;.tip&quot;).slideUp(200);alert(CurrPic);CurrPic++;if(CurrPic&gt;4)CurrPic=0;});
}
})(jQuery);
$(document).ready(function(){
PicArr = new Array(&quot;1.jpg&quot;,&quot;2.jpg&quot;,&quot;3.jpg&quot;,&quot;4.jpg&quot;,&quot;5.jpg&quot;);
CurrPic=0;
$(&quot;.tip&quot;).css({&quot;position&quot;:&quot;absolute&quot;,&quot;top&quot;:&quot;100px&quot;,&quot;left&quot;:&quot;50px&quot;});
$(&quot;.tip&quot;).hide();
$(&quot;.scoll&quot;).click(function(){$.NextPic();});
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input class=&quot;picbtn&quot; type=&quot;button&quot; value=&quot;Next&quot; /&gt;
&lt;p class=&quot;tip&quot;&gt;正在加载……&lt;/p&gt;
&lt;p class=&quot;notice&quot;&gt;
&lt;img id=&quot;img&quot;/&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

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!

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!

Statement of this Website

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