SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Preload images and x.js compatibility

    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.
    Last edited by Artech8; Aug 21, 2003 at 10:53. Reason: url change

  2. #2
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    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.
    Code:
    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();
    }

  4. #4
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by Artech8; Aug 21, 2003 at 10:50.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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

  6. #6
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Artech8 ( and anyone else )

    Its a good idea to put an index.html or default.html in all your subfolders, stops people looking in!!!!!!
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good tip, Markdidj


  8. #8
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome, Artech8.

    >> You are quite the genius.

    Oh I wish!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •