Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    having 2 things load at EXACTLY the same time

    I have a multi-image rollover script, the only issue is that it loads images one at a time and for the first second or so the complete image looks dissociated.

    is there a way to load all the images at once, or to "not rollover until all images loaded"
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, if you use the complete property of images, you could write a script which checks that all have completed before executing the rollover. basically, increment a value according to the number of complete images, and when it reaches the length of your image array, then you're ready for take-off.
    *keep it simple (TM)

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Can you post your url so we can see the code
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can do rollovers without a preload by putting all the states in the same image and then changing their background-position. Check this out: http://wellstyled.com/css-nopreload-rollovers.html
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    the full source is at www.enviromark.ca

    you can see that there is a delay with the onmouseover on the enter sign, even though i use a really cool script that willy and i developped called a postload script, which allows the page to load and then once it's loaded, preceeds to load any images specified into an array.

    here's the code
    Code:
    </script>
    
    <script type="text/javascript">
     //<![CDATA[
      function postLoad(){ 
        if(!window.name.match(/preLoad.complete/gi)){ 
         var images = new Array('EnglishOn.gif',
                                'EnterOn.gif',
                                'EntrerOn.gif',
                                'FrenchOn.gif'); 
    
         var loader = new Array();
          for(var i=0; i<images.length; i++){
             loader[i] = new Image();
             loader[i].src = images[i];
           }
    		  window.name = 'preLoad.complete';
        }         
      }
     //]]>
    </script>
    
    ...
    <body onload="postLoad()">
    but there still seems to be a delay... which you can see if you go to the url.

    it is a 7 image rollover, but with postloading that should be compensated for...

    any thoughts?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The advantages of Postloading is that it allows the page to quickly load without waiting for those images to load first and allows these images to load in the background after the page has been displayed.... This technique is particularly useful for image slideshows or when you wish to preload your next pages images.... But, there will be a slight delay if used with rollovers and someone jumps to one of the links immediatedly on page load and prior to these postloaded images having a chance to load....

    I'm sure I mentioned this when we were discussing Postloading versus Preloading but your solution is to Preload..... Either remove the function wrapper or call the function on window.onload....

    ......Willy

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    its odd though willy, i have left the page for a full minute without moving my mouse, but when i go over the rollover there's still what seems to be a loading delay.

    try it and tell me what you find
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #8
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    seems alright to moi
    *keep it simple (TM)

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problems here with the rollovers either...

    But since there is really is not much content on that page and since the images are rather small... It would not hurt to preload rather than postload....

    .....Willy

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    document.EnterOffSW.src = "img/EntrerOn.gif";

    var images = new Array('EnglishOn.gif',
    'EnterOn.gif',
    'EntrerOn.gif',
    'FrenchOn.gif');

  • #11
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i'm not sure i follow your logic Roy.

    The EntrerOn.gif is a rollover image, and is only loaded when the user does an onMouseOver
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #12
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'm not sure i follow your logic Roy.

    The EntrerOn.gif is a rollover image, and is only loaded when the user does an onMouseOver
    The logic is to preload all images, no matter how small the file size. The images will be loaded into the cache. Waiting for rollover images to download on mouseover is not a good practice.

    In fact, even if the images have already been loaded, it is better to swap layer visibility, instead of the actual images.


    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by canadianjameson
    i'm not sure i follow your logic Roy.

    The EntrerOn.gif is a rollover image, and is only loaded when the user does an onMouseOver
    Hi,
    I was in a hurry.

    What I was trying to point out is that you are not preloading any images because the source string in your preload code is not correct. It should be

    var images = new Array('img/EnglishOn.gif',
    'img/EnterOn.gif',
    'img/EntrerOn.gif',
    'img/FrenchOn.gif');

  • #14
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    HAHAHAHHAHAHA O M G!

    dude

    wow

    i think i'm gonna take my pretty pink skirt and go home.

    wow
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #15
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    dude, thank you so much. it works perfectly now
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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