jquery to implement Ajax loading picture method _jquery

The example of this article describes the method of jquery to implement Ajax loading pictures. Share to everyone for your reference, specific as follows:

Recently in the study of jquery, want to simulate the principle of no refreshing album browsing.

The first thought of the idea is to use the cache, that is, first display the prompt message, and then get pictures, in the end of the callback, the IMG tag src change, because just get past, with a cache, so the picture will immediately show up.

Page elements:

<input class= "picbtn" type= "button" value= "Next"/> <div
"Tip" > Loading class= ......</div>
class= "notice" >

</div>

Event Bindings for buttons:

Copy Code code as follows:

$ (". Picbtn"). Click (function () {nextpic ();});

Defines an array Picarr to record all pictures

Nextpic content:

$ (". Tip"). Slidedown (200); Displays prompt
$.get (picarr[currpic],function () {
$ ("img"). attr ("src", picarr[currpic]);
$ (". Tip"). Slideup (MB);
currpic++;
if (currpic>4)
currpic=0;
});

Under the chrome and FF display Normal, IE6 under abnormal, IE7, 8 not tested.

Later, in the Asprain developer Mountain Help, the idea changed to the first SRC, then bind the OnLoad event, in the onload callback.

Core code:

$ ("img"). attr ("src", picarr[currpic]) 
. bind (' Load ', function () {$ (". Tip"). Slideup (200); Currpic++;if (currpic>4) currpic=0;});

Later a look basically normal, but look carefully or not normal, picture sequence began to jump, tracking a long time to find the callback function will run multiple times.

The middle thought would not be the issue of event binding, because the binding of the OnClick event is

Copy Code code as follows:

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

Can be written by Jane

Copy Code code as follows:

$ (Element). Click (Callback)

Think of $ (element). Bind ("Load", callback) and $ (element). Load (Url,callback) will not be the same, look up the information is not very clear, changed the try, or is not the same, However, under the chrome and FF can still work, but the data is not normal, ie under the error.

Check the code of the mountain again and find out where the problem is.

The Load event is bound to an anonymous function and is bound again when the button is pressed, so it repeats. So I'll change the binding bind to one. 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 ">  

I hope this article will help you with your jquery programming.