Page 1 of 1
Using Ajax to display image
Posted: Fri Oct 18, 2013 9:30 am
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
Re: Using Ajax to display image
Posted: Fri Oct 18, 2013 10:14 am
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.
Re: Using Ajax to display image
Posted: Fri Oct 18, 2013 11:11 am
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.
HTMLCode: 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>
JAVASCRIPTCode: 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;
};