Preload Images using JavaScript?

**bassa** · 02-06-2009, 10:55 AM

I have tried for the first time to use JavaScript (instead of Dreamweaver) to preload specific images that appears on almost all pages throughout my website.

So, just wanted to make sure that I've got this right. Here's the script code:

Code:

</script>

<script language = javascript>
if (document.images) 
{
   img1 = new Image();
   img2 = new Image();
   img3 = new Image();
   img4 = new Image();
   img5 = new Image();
   img6 = new Image();
   img7 = new Image();
   img8 = new Image();
   img9 = new Image();
   img10 = new Image();
   img11 = new Image();
   img12 = new Image();
   img13 = new Image();
   img14 = new Image();
   img15 = new Image();
   img16 = new Image();
   img17 = new Image();
   img18 = new Image();
   img19 = new Image();
   img1.src = "http://www.froso.dk/images/logo.gif";
   img2.src = "http://www.froso.dk/images/thumbnail_bottom.gif";
   img3.src = "http://www.froso.dk/images/thumbnail_center.gif";
   img4.src = "http://www.froso.dk/images/thumbnail_top.gif";
   img5.src = "http://www.froso.dk/images/closelabel.gif";
   img6.src = "http://www.froso.dk/images/bg_tile.gif";
   img7.src = "http://www.froso.dk/images/bg_top.gif";
   img8.src = "http://www.froso.dk/images/breadcrumb.gif";
   img9.src = "http://www.froso.dk/images/button_clearall_off.gif";
   img10.src = "http://www.froso.dk/images/logo.gif";
   img11.src = "http://www.froso.dk/images/logo.gif";
   img12.src = "http://www.froso.dk/images/logo.gif";
   img13.src = "http://www.froso.dk/images/logo.gif";
   img14.src = "http://www.froso.dk/images/logo.gif";
   img15.src = "http://www.froso.dk/images/logo.gif";
   img16.src = "http://www.froso.dk/images/logo.gif";
   img17.src = "http://www.froso.dk/images/logo.gif";
   img18.src = "http://www.froso.dk/images/logo.gif";
   img19.src = "http://www.froso.dk/images/logo.gif";
}
</script>

</head>

<body onload="MM_preloadImages('../images/button_share_on.gif','../images/logo.gif')">

The JavaScript preload images script is inside the HEAD.

Code:

<body onload="MM_preloadImages('../images/button_share_on.gif','../images/logo.gif')">

The above line of code here (Dreamweaver's way of preloading images) will be removed as soon as I'm sure that I'm using the JavaScript alternative correctly.

Have I gotten this right?

Cheers,
Bassa

PS: I had heard somewhere that I should remove Dreamweaver's preload images script and exchange it with a JavaScript method instead.

**vwphillips** · 02-06-2009, 01:37 PM

your solution looks fine.
However the DreamWeaver function is also fine although the method of calling it is clumsey.

you may wish to consider

Code:

<script language = javascript>

function LoadImages(){
 var Path='http://www.froso.dk/images/';
 var ImgAry = [];
 ImgAry[0]= "logo.gif";
 ImgAry[1]="thumbnail_bottom.gif";
 ImgAry[2]="thumbnail_center.gif";
 ImgAry[3]="thumbnail_top.gif";
 ImgAry[4]="closelabel.gif";
 ImgAry[5]="bg_tile.gif";
 ImgAry[6]="bg_top.gif";
 ImgAry[7]="breadcrumb.gif";
 ImgAry[8]="button_clearall_off.gif";
 ImgAry[9]="logo.gif";
 ImgAry[10]="logo.gif";
 ImgAry[11]="logo.gif";
 ImgAry[12]="logo.gif";
 ImgAry[13]="logo.gif";
 ImgAry[14]="logo.gif";
 ImgAry[15]="logo.gif";
 ImgAry[16]="logo.gif";
 ImgAry[17]="logo.gif";
 ImgAry[18]="logo.gif";

 var URLAry=[];
 for (var z0=0;z0<ImgAry.length;z0++){
   URLAry[z0]=new Image();
   URLAry[z0].src=Path+ImgAry[z0]
 }
}

LoadImages();
</script>

Note that it is best calling function LoadImages() from a BODY or window onload event so that your page loads before loading the images.

Note also there is no need to preload images that are coded in the HTML code.

**bassa** · 02-06-2009, 02:18 PM

Very nice. Thank you!

Cheers,
Bassa

**bassa** · 02-08-2009, 10:58 AM

Like this?

Code:

</head>

<body>

<script language = javascript>

function LoadImages(){
 var Path='http://www.froso.dk/images/';
 var ImgAry = [];
 ImgAry[0]= "logo.gif";
 ImgAry[1]="thumbnail_bottom.gif";
 ImgAry[2]="thumbnail_center.gif";
 ImgAry[3]="thumbnail_top.gif";
 ImgAry[4]="bg_tile.gif";
 ImgAry[5]="bg_top.gif";
 ImgAry[6]="breadcrumb.gif";
 ImgAry[7]="button_clearall_off.gif";
 ImgAry[8]="button_clearall_on.gif";
 ImgAry[9]="button_decrease_off.gif";
 ImgAry[10]="button_decrease_on.gif";
 ImgAry[11]="button_increase_off.gif";
 ImgAry[12]="button_increase_on.gif";
 ImgAry[13]="button_off.gif";
 ImgAry[14]="button_off2.gif";
 ImgAry[15]="button_on.gif";
 ImgAry[16]="button_on2.gif";
 ImgAry[17]="button_print_off.gif";
 ImgAry[18]="button_print_on.gif";
 ImgAry[19]="button_send_off.gif";
 ImgAry[20]="button_send_on.gif";
 ImgAry[21]="button_share_off.gif";
 ImgAry[22]="button_share_on.gif";
 ImgAry[23]="button_submenu_off.gif";
 ImgAry[24]="button_submenu_on.gif";
 ImgAry[25]="button_submit_off.gif";
 ImgAry[26]="button_submit_on.gif";

 var URLAry=[];
 for (var z0=0;z0<ImgAry.length;z0++){
   URLAry[z0]=new Image();
   URLAry[z0].src=Path+ImgAry[z0]
 }
}

LoadImages();
</script>

Just make sure to put the script inside the BODY tag, correct?

Cheers,
Bassa

**vwphillips** · 02-08-2009, 03:17 PM

Note that it is best calling function LoadImages() from a BODY or window onload event so that your page loads before loading the images.

but you can put the within the body tags so long as is is just before the </BODY> tag.

however convertion says it should be within the header

for interest

Code:

<head>
<script language = javascript>

function LoadImages(){
 var Path='http://www.froso.dk/images/';
 var ImgAry = [];
 ImgAry[0]= "logo.gif";
 ImgAry[1]="thumbnail_bottom.gif";
 ImgAry[2]="thumbnail_center.gif";
 ImgAry[3]="thumbnail_top.gif";
 ImgAry[4]="bg_tile.gif";
 ImgAry[5]="bg_top.gif";
 ImgAry[6]="breadcrumb.gif";
 ImgAry[7]="button_clearall_off.gif";
 ImgAry[8]="button_clearall_on.gif";
 ImgAry[9]="button_decrease_off.gif";
 ImgAry[10]="button_decrease_on.gif";
 ImgAry[11]="button_increase_off.gif";
 ImgAry[12]="button_increase_on.gif";
 ImgAry[13]="button_off.gif";
 ImgAry[14]="button_off2.gif";
 ImgAry[15]="button_on.gif";
 ImgAry[16]="button_on2.gif";
 ImgAry[17]="button_print_off.gif";
 ImgAry[18]="button_print_on.gif";
 ImgAry[19]="button_send_off.gif";
 ImgAry[20]="button_send_on.gif";
 ImgAry[21]="button_share_off.gif";
 ImgAry[22]="button_share_on.gif";
 ImgAry[23]="button_submenu_off.gif";
 ImgAry[24]="button_submenu_on.gif";
 ImgAry[25]="button_submit_off.gif";
 ImgAry[26]="button_submit_on.gif";

 var URLAry=[];
 for (var z0=0;z0<ImgAry.length;z0++){
   URLAry[z0]=new Image();
   URLAry[z0].src=Path+ImgAry[z0]
 }
}


// this is a reasonably good way to add events
function zxcEventAdd(o,f,e,p) {
 if ( o.addEventListener ){ o.addEventListener(e,function(ev){ return o[f](ev,p);}, false); }
 else if ( o.attachEvent ){ o.attachEvent('on'+e,function(ev){ return o[f](ev,p); }); }
 else {
  var prev=o['on'+e];
  if (prev){ o['on'+e]=function(ev){ prev(ev); o[f](ev,p); }; }
  else { o['on'+e]=o[f]; }
 }
}

function zxcAddEvt(obj,fun,ev,p){
 if (obj['zxc'+fun+ev]) return;
 obj['zxc'+fun+ev]=window[fun];
 zxcEventAdd(obj,'zxc'+fun+ev,ev,p);
}

zxcAddEvt(window,'LoadImages','load');
// where;
// parameter 0 = the object to add the event.                           (object)
// parameter 1 = the function to be called.                             (string)
// parameter 2 = the event type.                                        (string, not including 'on')
// parameter 3 = (optional) the second argument passed to the function. (string, not including 'on')
// note that the first agument will be the event, and within the event 'this' will be the object calling the function

</script>
</head>

**jscheuer1** · 02-08-2009, 03:25 PM

The language attribute has been deprecated:

Code:

<script language = javascript>

The type attribute is required:

Code:

<script type="text/javascript">

**bassa** · 02-08-2009, 03:31 PM

So...

Code:

<head>
<script type="text/javascript">

function LoadImages(){
 var Path='http://www.froso.dk/images/';
 var ImgAry = [];
 ImgAry[0]= "logo.gif";
 ImgAry[1]="thumbnail_bottom.gif";
 ImgAry[2]="thumbnail_center.gif";
 ImgAry[3]="thumbnail_top.gif";
 ImgAry[4]="bg_tile.gif";
 ImgAry[5]="bg_top.gif";
 ImgAry[6]="breadcrumb.gif";
 ImgAry[7]="button_clearall_off.gif";
 ImgAry[8]="button_clearall_on.gif";
 ImgAry[9]="button_decrease_off.gif";
 ImgAry[10]="button_decrease_on.gif";
 ImgAry[11]="button_increase_off.gif";
 ImgAry[12]="button_increase_on.gif";
 ImgAry[13]="button_off.gif";
 ImgAry[14]="button_off2.gif";
 ImgAry[15]="button_on.gif";
 ImgAry[16]="button_on2.gif";
 ImgAry[17]="button_print_off.gif";
 ImgAry[18]="button_print_on.gif";
 ImgAry[19]="button_send_off.gif";
 ImgAry[20]="button_send_on.gif";
 ImgAry[21]="button_share_off.gif";
 ImgAry[22]="button_share_on.gif";
 ImgAry[23]="button_submenu_off.gif";
 ImgAry[24]="button_submenu_on.gif";
 ImgAry[25]="button_submit_off.gif";
 ImgAry[26]="button_submit_on.gif";

 var URLAry=[];
 for (var z0=0;z0<ImgAry.length;z0++){
   URLAry[z0]=new Image();
   URLAry[z0].src=Path+ImgAry[z0]
 }
}

</script>
</head>

...there we go?

Cheers,
Bassa

**jscheuer1** · 02-08-2009, 04:54 PM

Good, but I'd go with:

Code:

<head>
<script type="text/javascript">
(function(){
var  LoadImages = function(){
 var Path='http://www.froso.dk/images/';
 var ImgAry = [];
 ImgAry[0]= "logo.gif";
 ImgAry[1]="thumbnail_bottom.gif";
 ImgAry[2]="thumbnail_center.gif";
 ImgAry[3]="thumbnail_top.gif";
 ImgAry[4]="bg_tile.gif";
 ImgAry[5]="bg_top.gif";
 ImgAry[6]="breadcrumb.gif";
 ImgAry[7]="button_clearall_off.gif";
 ImgAry[8]="button_clearall_on.gif";
 ImgAry[9]="button_decrease_off.gif";
 ImgAry[10]="button_decrease_on.gif";
 ImgAry[11]="button_increase_off.gif";
 ImgAry[12]="button_increase_on.gif";
 ImgAry[13]="button_off.gif";
 ImgAry[14]="button_off2.gif";
 ImgAry[15]="button_on.gif";
 ImgAry[16]="button_on2.gif";
 ImgAry[17]="button_print_off.gif";
 ImgAry[18]="button_print_on.gif";
 ImgAry[19]="button_send_off.gif";
 ImgAry[20]="button_send_on.gif";
 ImgAry[21]="button_share_off.gif";
 ImgAry[22]="button_share_on.gif";
 ImgAry[23]="button_submenu_off.gif";
 ImgAry[24]="button_submenu_on.gif";
 ImgAry[25]="button_submit_off.gif";
 ImgAry[26]="button_submit_on.gif";

 var URLAry=[];
 for (var z0=0;z0<ImgAry.length;z0++){
   URLAry[z0]=new Image();
   URLAry[z0].src=Path+ImgAry[z0]
 }
};

if (window.addEventListener)
 window.addEventListener('load', LoadImages, false);
else if (window.attachEvent)
 window.attachEvent('onload', LoadImages);
})();
</script>
</head>

Now, there is no global exposure. This will run onload, no need to put anything in the body tag.

The only concern I have, and it is only a concern, is that with specifying the absolute path in the function, you should also specify the absolute path wherever these preloaded images get used, otherwise it is possible that a given browser will need to re-cache them. If they are available relative to the page though, only the relative path should be required in either their preloading or their use, as browsers will treat them both the same, regardless of how they approach it.

All this means is that if you use the absolute path for preloading, use it everywhere that you reference these images.

Thread: Preload Images using JavaScript?

Thread Tools

Search Thread

Preload Images using JavaScript?

Bookmarks

Bookmarks

Posting Permissions