Using Ajax to display image

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
samir_gambler
Forum Newbie
Posts: 19
Joined: Wed Mar 31, 2010 9:03 am

Using Ajax to display image

Post by samir_gambler »

Hi,
I am new to AJAX and Javascript. I want to get the list of images path on click of a button from server using AJAX(through JSON) then I want to display the image one after the other i.e. first I will display first image for 5 sec then second image for 5 sec and so on. I want to first load all the images then start displaying one after the other so that it display the complete loaded image for 5 sec. Can you please guide me how to do this.

Thanks & Regards,
Samir
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Re: Using Ajax to display image

Post by Burrito »

You shouldn't need Ajax to display the images. You can use Ajax to grab your list of images, but after that, you can use the Image() object to "preload" your images and display them accordingly.

I'd recommend not pulling all of them down at once (depending on how large they are), but rather pulling down the 3rd (or 2nd) one in the sequence. That way, your image is preloaded, but not causing a large strain on your user's pipe.

you can use something like:

Code: Select all

var img = new Image();
img.src = url;
to preload the images.
samir_gambler
Forum Newbie
Posts: 19
Joined: Wed Mar 31, 2010 9:03 am

Re: Using Ajax to display image

Post by samir_gambler »

Burrito wrote:You shouldn't need Ajax to display the images. You can use Ajax to grab your list of images, but after that, you can use the Image() object to "preload" your images and display them accordingly.

I'd recommend not pulling all of them down at once (depending on how large they are), but rather pulling down the 3rd (or 2nd) one in the sequence. That way, your image is preloaded, but not causing a large strain on your user's pipe.

you can use something like:

Code: Select all

var img = new Image();
img.src = url;
to preload the images.
But how we will make sure the image is loaded prior to displaying the image
I tried something like this but it is not working.

HTML

Code: Select all

<!doctype html>
<html>
<head>
<script type="text/javascript" src="script.js">
</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<img src="" name="im1" width="561" height="465"  alt=""/>
</body>
</html>
JAVASCRIPT

Code: Select all

var loadedimages = new Image();
loadedimages.src= "http://ts4.mm.bing.net/th?id=H.4768020459882111&pid=15.1";

loadedimages.onload=function()
{
	document.im1.src = loadedimages.src;
};
Post Reply