SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Fairbanks, Alaska
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Preload Images

    Okay, I have a site that I have a bunch of rollovers for..

    I have a preload image script as follows


    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    image1 = new Image();
    image1.src = "/images/image1-over.jpg";
    image2 = new Image();
    image2.src = "/images/image2-over.jpg";
    // End -->
    </script>


    This works just fine for NETSCAPE... it preloads it, so you can cruise over the rollovers perfectly without wait the first time you load.


    However, with IE, it doesn't work the way it should, and it still takes time to load each rollover when you hover the first time. And they don't seem to cache properly and you're constantly reloading them.


    Any suggestions on my problem?

  2. #2
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your coude should be working in IE. It is pretty standard image pre load. Is it possible that you have something set in your browser that could be hindering it? Have you had others check it out to see if they get the same result?

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best/fastest preload/rollover scripts use the actual JSObjects created by the preloading routine in the rollover script. Example of NOT doing so
    Code:
    image1 = new Image();
    image1.src = "somePicOver.gif";
    
    ...
    
    <img src="somePic.gif" onmouseover="this.src = 'somePicOver.gif';" onmouseout="this.src = 'somePic.gif';"/>
    Now, here's an example of using the JSObjects we make in the prelod portion
    Code:
    image1 = new Image();
    image1.src = "somePicOver.gif";
    
    ...
    
    <img src="somePic.gif" onmouseover="this.src = image1.src;" onmouseout="this.src = 'somePic.gif';"/>
    Of course - you could use a function for the roll over/out - but you get the idea, I think.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •