Preloading images using JavaScript

August 13, 2008 at 11:46 pm (Learning)
Tags:

Now a days, website design using images becomes popular trends. As Internet speed increases, designers can now use images for website design more freely and frequently. But if our targeted user base has slow connection, then they may experience a broken site. Images are loaded part by part. Web browsers start to build the output as soon as it start to get the html. So the user may see a broken site as all the design images on that page is not loaded first. To overcome this problem we can use JavaScript. We can use JavaScript to preload the design images for any page at the very first moment of loading the page. We can put the JavaScript code below inside our <head> tag so that the images are started to load as soon as the page started to load. After that we can use the images in normal way. If we put the CSS codes after that, then the page will be built without any broken look.

<script type="text/javascript">
   image01 = new Image();
   image01.src = "http://mywebsite.com/images/1.gif";
   image02 = new Image();
   image02.src = "2.jpg";
</script>

If we have many images for any page, then we can use array to load
images. For example,
<script type=“text/javascript”>
if(document.images)
{
imgPreloader = new Image();
ImageUrl = new Array();
ImageUrl[0] = “http://myweb.com/images/topbar.png”;
ImageUrl[1] = “http://myweb.com/images/sidebar.png“;
ImageUrl[2] = “images/mainbanner.jpg”;
for(i = 0; i <= count(ImageUrl); i++)
{
imgPreloader.src = ImageUrl[i];
}
}
</script>

This preloading technique can be used for any photo album or gallery where we can preload the
next or previous images of the current image so that the user does not have to wait much
when he see a slideshow or browse images using next/previous links. You can view such
album in Picasa by Google or at facebook. We can use Ajax with this to avoid the page loading in viewing photo albums.

2 Comments