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:

4a9db50b40e39eca75cbc99c2c312d9f
4210fe3935aaf62d0282b34d795cabaf正在加载……94b3e26ee717c64999d7867364b1b4a3
ff8c108d65d523a809fb6ace59384e83
959ca913a624e25b2223e504f10f3326
94b3e26ee717c64999d7867364b1b4a3

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:

0d8422d5a748d838d5911bbec5723448
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
b2386ffb911b14667cb8f0f91ea547a7JQUERY动态加载图片6e916e0f7d1e588d4f442bf645aedb2f
044d7161605f615a3151a8dfc16550092cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
(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();});
})
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
4a9db50b40e39eca75cbc99c2c312d9f
4210fe3935aaf62d0282b34d795cabaf正在加载……94b3e26ee717c64999d7867364b1b4a3
ff8c108d65d523a809fb6ace59384e83
6b8f78aabd1c9dd3c316942cb62a24ee
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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!