Preload images and x.js compatibility

[Artech8]

Thanks to Mike and Paul for their help last week getting equal columns for my site. Now I'm having one slight issue. I cannot use MM_preloadImages in conjunction with the column heights. I'm presuming it is because the adjust layout uses window.onload and the preload goes into the body tag as onLoad.
Without the preloadImages the column heights work fine.

I've posted a copy of one page that cannot work with the columns here: http://artechllc.com/aboutUs.html

Any suggestions?

All help appreciated.

[Poop_Shoot]

Wow that is quite some code there! UHHHH! Well I suspect it is because as you said the images are preloading after the page loads so how can they be preloaded! I would just not have it in a function and have it execute automatically! Then again Im not quite sure I do not know if it would work!

[MikeFoster]

Hi Artech8,

Here are two different ways to go...

1. Preload as the page loads. The window.onload event will not fire until the images are loaded.

MM_preloadImages(
  'images/navigation/intNav/overslice/aboutUs_Over.png',
  'images/navigation/intNav/overslice/agOver.png',
  'images/navigation/intNav/overslice/auDropBar.png',
  'images/navigation/intNav/overslice/cFormOver.png',
  'images/navigation/intNav/overslice/clistOver.png',
  'images/navigation/intNav/overslice/companiesOver.png',
  'images/navigation/intNav/overslice/compDropBar.png',
  'images/navigation/intNav/overslice/contactOver.png',
  'images/navigation/intNav/overslice/cuDropBar.png',
  'images/navigation/intNav/overslice/drivingOver.png',
  'images/navigation/intNav/overslice/dtOver.png',
  'images/navigation/intNav/overslice/mgmtOver.png',
  'images/navigation/intNav/overslice/mtOver.png',
  'images/navigation/intNav/overslice/philoOver.png',
  'images/navigation/intNav/overslice/phoneOver.png',
  'images/navigation/intNav/overslice/quoteOver.png',
  'images/navigation/intNav/overslice/testOver.png',
  'images/navigation/intNav/overslice/wpsDropBar.png',
  'images/navigation/intNav/overslice/wpsOver.png',
  'images/navigation/intNav/overslice/wtOver.png'
); // end MM_preloadImages()

window.onload = function() {
  xAddEventListener(window, 'resize', adjustLayout, false);
  adjustLayout();
}

2. Preload after the page loads, in the window.onload event handler.

function preloadImgs() {
  MM_preloadImages(
    'images/navigation/intNav/overslice/aboutUs_Over.png',
    'images/navigation/intNav/overslice/agOver.png',
    'images/navigation/intNav/overslice/auDropBar.png',
    'images/navigation/intNav/overslice/cFormOver.png',
    'images/navigation/intNav/overslice/clistOver.png',
    'images/navigation/intNav/overslice/companiesOver.png',
    'images/navigation/intNav/overslice/compDropBar.png',
    'images/navigation/intNav/overslice/contactOver.png',
    'images/navigation/intNav/overslice/cuDropBar.png',
    'images/navigation/intNav/overslice/drivingOver.png',
    'images/navigation/intNav/overslice/dtOver.png',
    'images/navigation/intNav/overslice/mgmtOver.png',
    'images/navigation/intNav/overslice/mtOver.png',
    'images/navigation/intNav/overslice/philoOver.png',
    'images/navigation/intNav/overslice/phoneOver.png',
    'images/navigation/intNav/overslice/quoteOver.png',
    'images/navigation/intNav/overslice/testOver.png',
    'images/navigation/intNav/overslice/wpsDropBar.png',
    'images/navigation/intNav/overslice/wpsOver.png',
    'images/navigation/intNav/overslice/wtOver.png'
  );
} // end preloadImgs()

window.onload = function() {
  preloadImgs();
  xAddEventListener(window, 'resize', adjustLayout, false);
  adjustLayout();
}

[Artech8]

Thanks, Mike. I couldn't make the first one work, but I think the idea of preloading AS the page loads would be better. Not sure if I was supposed to take out the original MM_preloadImages function with either version - but leaving it in, the second version seems to work.

Thanks

[MikeFoster]

I think the idea of preloading AS the page loads would be better...

There are pros and cons:
#1 can make the page take longer to load. But with #1 the images are ready for mouseover as soon as the user gets the page.
#2 is loading the images while the user is taking that initial stare at the page, so the page may load quicker. But the images may not have all loaded before the user makes the first mouseover.

Looking at your page I see that you have implemented #2 properly. If you want to try #1, I made the following example from your page:

<html>
<head>
<link href="artechLLC.css" rel="stylesheet" type="text/css">
<script src ="x.js" type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
MM_preloadImages(
  'images/navigation/intNav/overslice/aboutUs_Over.png',
  'images/navigation/intNav/overslice/agOver.png',
  'images/navigation/intNav/overslice/auDropBar.png',
  'images/navigation/intNav/overslice/cFormOver.png',
  'images/navigation/intNav/overslice/clistOver.png',
  'images/navigation/intNav/overslice/companiesOver.png',
  'images/navigation/intNav/overslice/compDropBar.png',
  'images/navigation/intNav/overslice/contactOver.png',
  'images/navigation/intNav/overslice/cuDropBar.png',
  'images/navigation/intNav/overslice/drivingOver.png',
  'images/navigation/intNav/overslice/dtOver.png',
  'images/navigation/intNav/overslice/mgmtOver.png',
  'images/navigation/intNav/overslice/mtOver.png',
  'images/navigation/intNav/overslice/philoOver.png',
  'images/navigation/intNav/overslice/phoneOver.png',
  'images/navigation/intNav/overslice/quoteOver.png',
  'images/navigation/intNav/overslice/testOver.png',
  'images/navigation/intNav/overslice/wpsDropBar.png',
  'images/navigation/intNav/overslice/wpsOver.png',
  'images/navigation/intNav/overslice/wtOver.png'); // end call to MM_preloadImages()
  
window.onload = function() {
  xAddEventListener(window, 'resize', adjustLayout, false);
  adjustLayout();
}   
function adjustLayout() 
{ 
  ...
} 
function MM_findObj(n, d) { //v4.01
  ...
}
function P7_autoLayers() { //v1.4 by PVII
  ...
}
function MM_preloadImages() { //v3.0
  ...
}
//-->
</script>     
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  ...
</body>
</html>

The call to MM_preloadImages occurs before the remainder of the file is parsed.

BTW, thanks for the very nice credit line

[Markdidj]

Artech8 ( and anyone else )

Its a good idea to put an index.html or default.html in all your subfolders, stops people looking in!!!!!!

[MikeFoster]

Good tip, Markdidj

[Artech8]

Mike -

I'll take a look at your example in a little while. Thanks so much. You deserved the credit (along with Paul) for getting me going in the first place.

[Artech8]

Mike - Thanks again - I don't know why I was having so many problems with #1 - but it works now. You are quite the genius.

[MikeFoster]

You're very welcome, Artech8.

>> You are quite the genius.

Oh I wish!