SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: preload images

  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    vermont
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy preload images

    I think I am going insane!!!!

    This code seems so simple but I can not get it to work. I am trying to preload images for use in an image swap. This is the code I am using

    <body onLoad="preloadimages('ro_bui.jpg', 'ro_mar.jpg', 'ro_sto.jpg', 'ro_mec.jpg', 'ro_pai.jpg', 'ro_fib.jpg')">

    <script language="JavaScript" type="text/javascript">
    <!--
    function preloadimages() {
    var roimages=new Array();
    var arguments=preloadimages.arguments;
    for (i=0;i<arguments.length;i++){
    roimages[i]=new Image();
    roimages[i].src=preloadimages.arguments[i];
    }
    }
    -->
    </script>

    In the mouseover event I have

    <a href="marina.htm" onmouseover="document.images['ro'].src=roimage[0].src" onmouseout="document.images['ro'].src='ro_base.jpg'">

    for each rollover.

    Can anybody tell me what I am doing wrong?!?!?!

    I am viewing the page on ie6

  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)
    Try Something Like This! It Should Work! Post Again If You Have Problems!

    Code:
    <html>
    <head>
    <script language="JavaScipt">
    var pixs=["images/001.jpg","images/002.jpg","images/003.jpg","images/004.jpg","images/005.jpg"];
    var pixsLoaded=[];
    for(var i=0;i<pixs.length;i++){
    pixsLoaded[i]=new Image();
    pixsLoaded[i].src=pixs[i];
    }
    </script>
    </head>
    <body>
    <img src="images/001.jpg" onmouseover="this.src=pixsLoaded[1].src"
     onmouseout="this.src=pixsLoaded[0].src">
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jul 2003
    Location
    vermont
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you suggested (thank-you very much) I changed my code and the following works placed in the Head or Body

    <script language="JavaScript">
    <!--
    var loadimages=["ro_bui.jpg", "ro_mar.jpg", "ro_sto.jpg", "ro_mec.jpg", "ro_pai.jpg", "ro_fib.jpg"];
    var roimages=[];
    for (var i=0;i<loadimages.length;i++){
    roimages[i]=new Image();
    roimages[i].src=loadimages[i];
    }
    -->
    </script>

    the problem is my page takes much to long to load; this is also why I was trying the onload event for the body. Even if I used the onload event and simply put this code in a function, I could not get it to work.

    Thanks again. Less frustrated.

  4. #4
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh Im confused! Usualy a page executes from top to bottom! Thus meaning things in the HEAD section are going to be loaded before the BODY section! And also there is no need for an onload event handler buy the time it hits the onload event! The images are already preloaded, The event handler should actually be called onafterload! Just Keep that Script in the head of your page and it should do its job!

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Preloading is for rollover images, meaning, they only have to be preloaded before a user moves his mouse over the image, not before the page is loaded.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  6. #6
    SitePoint Member
    Join Date
    Jul 2003
    Location
    vermont
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using the images for a rollover and I am trying to get them to load after the page. I moved the javascript to just before the close body tag and this seemed to help but I know there must be a better way. I can't seem to get the onload event to work.

  7. #7
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok one last time! Im pretty sure that the only way to preload images into the cache is before the page loads! Basically the browser reads everything on page caches it! Then loads the page physically for you to see! So IMO there is no way to preload the images after the page has loaded! Sorry and Good Luck!

  8. #8
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You Could try something like this maybe!


    Code:
    <html>
    <head>
    <script language="JavaScipt">
    var pixs=["images/001.jpg","images/002.jpg","images/003.jpg","images/004.jpg","images/005.jpg"];
    var pixsLoaded=[];
    
    window.onload=function(){
    for(var i=0;i<pixs.length;i++){
    pixsLoaded[i]=new Image();
    pixsLoaded[i].src=pixs[i];
    }}
    </script>
    </head>
    <body>
    <img src="images/001.jpg" onmouseover="this.src=pixsLoaded[1].src"
     onmouseout="this.src=pixsLoaded[0].src">
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Jul 2003
    Location
    vermont
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help poop shoot. I added a menu function, put the preload code in with it, called the menu function with the onload event and it works. Go figure.


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
  •