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
Using Ajax to display image
Moderator: General Moderators
-
samir_gambler
- Forum Newbie
- Posts: 19
- Joined: Wed Mar 31, 2010 9:03 am
Re: Using Ajax to display image
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:
to preload the images.
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;
-
samir_gambler
- Forum Newbie
- Posts: 19
- Joined: Wed Mar 31, 2010 9:03 am
Re: Using Ajax to display image
But how we will make sure the image is loaded prior to displaying the imageBurrito 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:
to preload the images.Code: Select all
var img = new Image(); img.src = url;
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>
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;
};