Home Search Member List Faq Register Login  
JavaScript Tips
Preload your images

Thread Starter: Karamasoft   Started: 09-18-2007 12:40 PM   Replies: 0
 Karamasoft Support Forums » General Discussions » JavaScript Tips » Preload your images
 Printable Version    « Previous Thread   Next Thread »
  18 Sep 2007, 12:40 PM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Preload your images

If you want to display your images instantly when the page is loaded, you should preload your images using JavaScript in the HEAD section of your web page. This technique also helps when you have rollover effects on your images where you display a different image when the mouse is over the image.

All you need to do is to create a new JavaScript Image object and set its src attribute to the path of your image.

<head runat="server">

<script type="text/javascript">

var img1 = new Image();

img1.src = '/Images/Product/UISuite.gif';

</script>

</head>

Note that you need to create new JavaScript Image objects for all the images you need to cache using different local variable names. To overcome this issue, you can use the following JavaScript function that takes the image paths as arguments and stores the JavaScript Image objects inside array elements.

<head runat="server">

<script type="text/javascript">

function PreloadImages() {

var lenArg = arguments.length;

if (lenArg > 0) {

var imgArr = new Array();

for (var i = 0; i < lenArg; i++) {

imgArrIdea = new Image();

imgArrIdea.src = argumentsIdea;

}

}

}

PreloadImages('/Images/Product/UltimateEditor.gif',

'/Images/Product/UltimateSearch.gif',

'/Images/Product/UltimateSpell.gif');

</script>

</head>

This function takes as many image path arguments as you pass, creates a new JavaScript Image object for each of them and stores them in an array.


  
 Page 1 of 1 (1 items)
Karamasoft Support Forums » General Discussions » JavaScript Tips » Preload your images

You can add attachments
You can post new topics
You can reply to topics
You can delete your posts
You can edit your posts
You can create polls
You can vote in polls
Forum statistics are enabled
Forum is unmoderated

© 2002-2018 Karamasoft LLC. All rights reserved.