• MICROSOFT
• COMPTIA +
• CISCO
• ORACLE
• SUN
• LINUX
• APPLE
• CITRIX

• HTML
• CSS
• JavaScript
• Vb Script
• ASP
• PHP
• Perl
• Visual Basic
• SEO

           

 

JavaScript

          Index         

 

Image handling

 

Background loading of image to cache by using JavaScript image object

While we are downloading any page we can also download images which are not going to be displayed immediately while showing the page. We can show the image by associating with an event and while displaying the content of the page the other image can be downloaded at background. This way the image will be downloaded to cache and then displayed from cache to the browser.

We will be using image object to download the image. One of its property src downloads the image. Here is the image object declaration and then downloading of image.
 

objImage = new Image();
objImage.src=''http://www.anyserver/image/2326.jpg'';
 

The above line will download the image to cache, we will try to connect displaying of this image with one event to see how fast the image loads. To do this we will have one simple function like this.
 

Once this function is called the image is displayed through a image tag (name = ) im. We will connect this function to one button onclick event like this.
 

To load the images while the page is loading we will use onload event of body tag. Here is the complete code. Replace the image urls of your choice. You will see the first image while page loads and allow some time for the remote image to load. Watch your status bar for messages and downloading of remote image file. Once you click the button the second image will display immediately with out any delay as it comes from the cache. If you are in a slow internet you can see the difference clearly. If you are in a fast net then try to connect to a heavy image to get the difference in speed. These concept will help us in building a JavaScript image slide show. Here is the complete code.

 

JavaScript Slideshow script using image object

We can create a slideshow by using client side JavaScript. Here for the slide show we will take a set of images and store them in an array. Inside the array only image address will be stored not the image. We will use image object to download and display the image. We will be downloading the next image while viewing any image in our slide show. Read the tutorial on how to download images at background to cache here.

In our script we will first create an array with urls of the images as array element. We will create an image object and inside the function download we will use this image object to download image at background to cache. This download function will be called once we successfully display an image from the array. Before that let us try to understand the buttons we will be using in our slide show.

We will be using two buttons to navigate in our slideshow. One button will move one step forward and other button will move one step backward. So each button will carry one value either +1 or -1 to tell what should be the next picture. The function name displaynext() receives these values and display the corresponding image. You can understand that at the last slide ( or image ) the NEXT button should be disabled as there is no next image . Same way at first slide the PREVIOUS button should be disabled. To work in all the browsers we will make it visible or hidden rather than making it enable or disable. Here is the code which will make NEXT button hidden at the last slide.
 

Same way at the first slide we will make previous button hidden.
 

Our main function displaynext(shift) will receive the value of shift based on the navigational buttons clicked ( it will either +1 or -1 ) and it will receive the value of 0 at the time of page load. Inside the function first the value of present slide is changed after adding the value of shift with present slide value. Then by one if condition the value of slide is checked as it should be within the values of image array. The value should be between 0 and number of element in the array. Once the if condition is satisfied, by using the .src property of the image element of the document the image is displayed. In the next line we will download the next image to be shown at background to cache. This way the next image can be shown immediately without any time delay. Here is the code of displaynext function.

 

At the time of page load we will pass a value of 0 to displaynext function to display the first element of the image array. While displaying this first element since the present slide value will be 0 so the previous button will not be visible. Here is the complete code of the slide show page.

<html>
<head>
<title>(Type a title for your page here)</title>
<script language="JavaScript">
var present_slide=0;

var images = new Array(''http://www.anyserver/image//2435.jpg'',
''http://www.anyserver/image//2436.jpg'',
''http://www.anyserver/image//2437.jpg'',
''http://www.anyserver/image//2438.jpg'',
''http://www.anyserver/image//2439.jpg'',
''http://www.anyserver/image//2440.jpg'',
''http://www.anyserver/image//2441.jpg'',
''http://www.anyserver/image//2442.jpg'');


objImage = new Image();
objImage = new Image();

function download(img_src){
// preload the image file
objImage.src=images[img_src];
}

function displaynext(shift){
present_slide=present_slide + shift;

if(images.length > present_slide && present_slide >= 0){
document.images[''im''].src = images[present_slide];

var next_slide=present_slide + 1;
download(next_slide); // Download the next image
}

if(present_slide+1 >= images.length ){
document.f1.Next.style.visibility = "hidden";
present_slide=images.length-1;
}else{document.f1.Next.style.visibility = "visible";}

if(present_slide<=0 ){
document.f1.Prev.style.visibility = "hidden";
present_slide=0;
}else{
document.f1.Prev.style.visibility = "visible";}
}
</script>
</head>
<body onLoad="displaynext(0)">

<form name="f1" method=post action=''''>

<img name="im" ></a><br>
<input type="button" name="Prev" value=" << " onClick="displaynext(-1);">
<input type="button" name="Next" value=" >> " onClick="displaynext(1);">
</form>
</body>
</html>
 

JavaScript Slideshow Rotator script

We can modify our JavaScript slide show script to show images automatically one after the other at a particular transition interval. Rotation is automatically triggered and user need to click the forward or backward buttons to navigate through the slideshow.

Please read JavaScript image slideshow script before adding this feature.

We will add one setTime function inside our displaynext function. This function will trigger the same displaynext function at an interval of 3 seconds. We can change this value and note that this function setTimeout accepts time duration values in milliseconds. You can read more on this at our JavaScript timer tutorials.

Note that all other codes are same as Javascript Slideshow tutorial and you can remove the codes for navigational buttons if required after adding automatic transition to our slideshow. Here is the code of displaynext function with the setTimeout function added.