SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Better Rollover Performance

    I've recently discovered a technique, through trial and error, that seems to give better rollover performance. Let, me know if any of this is common knowledge, btw. With some of the auto-generated scripts (ImageReady etc) and in most JavaScript manuals, rollovers are handled by preloading images using the new Image() method and calling a function using the *onload* event. One problem that i've had with this approach on (slow modems), is that IE and other browsers do not consistently cache the images that act as the *over* state, and so when you roll over it attempts to download the image each time. This seems to be related to browser cache settings, but honestly it doesn't seem to matter sometimes.

    Bascially, in order to get the browser to cache the images, I've found the best way is to load the *over* images at the bottom of the document, or anywhere that they will not be obtrusive, and size each preloader image to 1x1 pixels. Then the src is immediately available for swapping.

    That way your rollover function or script can be dramatically less complex. Has anyone tried this? Do you know of any drawbacks to it?

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Love Ojai. Used to mountainbike there regularly, Sisar Canyon, Nordhoff Ridge, Gridley. Sweet!

    http://www.webreference.com/dhtml/column1/preload.html

    Caching behavior is subject to a lot of variables.
    ::: certified wild guess :::

  3. #3
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by adios
    Love Ojai. Used to mountainbike there regularly, Sisar Canyon, Nordhoff Ridge, Gridley. Sweet!
    Hi Adios,

    Wow, looks like I've found a friend. Those are some of my fav trails too -- are you near by?

    Ever do the Gridley / Sisar loop -- it's a killer, but going down Sisar after all that work just rocks. All those berms, all the jumps -- too much fun

    My stumpjumper FSR comp is collecting a little dust, but i do some night rides when i'm not bugging out on my computer.

    Good to meet ya

  4. #4
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webreference.com
    The best method is to create a new Image object and set the value of its src property. The worst, of course, is actually loading it into a page with both its WIDTH and HEIGHT values set to 1. We've encountered pages where an image was loaded for later use by shrinking it to 1x1 and using it as the period ending a sentence. Don't have these authors screw in a lightbulb for you. You might have to buy a new house.
    Why do i suddenly feel insulted? LOL

    I couldn't agree less with the statements in this article. The new Image object doesn't seem to be the best solution as it is inconsistent and subject to random caching behavior, while physically preloading them into the document is unobtrusive enough and gives consistent results.

    I don't know about the period thing, but that seems too time consuming, and at 1 pix wide and 1 pix high, it isn't causing any huge display problems, unless users are hunting down single pixels at the end of a page that blend into the background.

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ::: certified wild guess :::

  6. #6
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks adios, good articles.

    Is that a panoramic shot?

    Looks very familiar What street is that?

  7. #7
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the most obvious reason why not to use it you gave yourself already. Doing this via javascript ensures that the images will only load when the useful content of the page is already there. When placing them directly into the HTML they'll probably mix with the other images in loading order.

    Fact stays though, that it works fine on the standard installations of all browsers. If you want to tamper with your browsers caching settings, you better know what you are doing. I dont think it's something designers need to take into account really, especially because it will only slow trivial things down for them anyways.

  8. #8
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tss68nl
    Doing this via javascript ensures that the images will only load when the useful content of the page is already there. When placing them directly into the HTML they'll probably mix with the other images in loading order.
    I wonder that that is an issue with smaller navigation-size images though, and don't all the *off* state buttons load in random order anyway? Like I built a gallery for a larger site, that swaps out images using the standard new Image() and onload methods, but it really sucks on dialup no matter which way you slice it, one thing that was clear with larger images, is that IE wasn't caching anything properly -- so it definitely mattered in this case. Like you pointed out though, as the *over* images just swapped out one central image, and because of the large file size of each image, preloading them into the document didn't coordinate the loading well enough to have them ready for mouseovers.

    Fact stays though, that it works fine on the standard installations of all browsers.
    That hasn't been my experience lately, using browsers with default settings at home and at work. On a T1 line I don't notice much, but on dialup it becomes obvious that the new Image() method accomplishes very little. Did you ever notice IE doesn't cache images on subdomains -- it's something like that.

    If you want to tamper with your browsers caching settings, you better know what you are doing.
    Do you mean through the browser options panel? That doesn't seem all that involved -- do it all the time. The point is, when I notice the caching problems, no browser cache setting will do anything to improve that situation, so it is really not something a user can control, and for that reason, I still see potential in preloading smaller images into the body.

    Who knows though, it seems like with older versions of IE and Netscape, the rollovers used to work great, perhaps it's a problem with recent changes to the latest browsers.

  9. #9
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The other technique I've caught onto, is swapping out a background image, using DOM and CSS, that gives good performance and a nice effect. Also, it can require less work.

  10. #10
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I have never seen any browser that had the same issue. I run a couple of heavy used sites as well, which have quite some demanding users on them who never complained about anything while all those sites use mouseovers cached via javascript.

    There *is* this issue ofcourse of a slow connection on which loads of image downloads will time out, just because there are too many around. That can hardly have changed for another reason than that they have set the timeout settings shorter in new browsers? Ofcourse it sucks on dailup...it's far too slow no matter how you turn it.

    However, making your preload images wait for the rest of the page to finish is something to think about since they are not indispensible for the navigation. Doesnt matter they still will go in random order, as long as you separate the two download batches it's okey.

    If you are wanting to go through great lengths to make it cache right on stray browsers so to say, and dont want to make use of those bad hacks like with the 1x1 images... then why not load two layers of images on top of eachother, and set the top layer image visibility off when the mouse goes over it? Heck, you could even do that fully in CSS. No javascript needed.

  11. #11
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by tss68nl
    There *is* this issue ofcourse of a slow connection on which loads of image downloads will time out, just because there are too many around. That can hardly have changed for another reason than that they have set the timeout settings shorter in new browsers? Ofcourse it sucks on dailup...it's far too slow no matter how you turn it.
    Well, you're sure right about dialup as on broadband, i'd never take the time to mess with all of this stuff.

    true, timeouts do happen...

    However, making your preload images wait for the rest of the page to finish is something to think about since they are not indispensible for the navigation. Doesnt matter they still will go in random order, as long as you separate the two download batches it's okey.
    Good points, you're right about that

    If you are wanting to go through great lengths to make it cache right on stray browsers so to say, and dont want to make use of those bad hacks like with the 1x1 images...
    Woah...easy there no, you're right, it is a bit of hack. I'm sorry for having wandered from the straight and narrow path of web standards. J/K

    then why not load two layers of images on top of eachother, and set the top layer image visibility off when the mouse goes over it? Heck, you could even do that fully in CSS. No javascript needed.
    Yeah I've thought of those things, but got too busy talking with you guys to make any headway on it...

  12. #12
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Why use Javascript for rollovers at all? CSS is much better and simpler!

    Behold the tabs on this forum (above), or the images in this page:
    http://webraft.its.unimelb.edu.au/76...masrr/pub/web/
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  13. #13
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by mmj
    Why use Javascript for rollovers at all? CSS is much better and simpler!
    Now you're talking! Yeah, I've been quickly running in that direction

    Behold the tabs on this forum (above), or the images in this page:
    http://webraft.its.unimelb.edu.au/76...masrr/pub/web/
    Yep, no download lights coming on during the mouseovers, as it should be

    Here's the one i'm building for client -- and it's using all CSS rollovers except for the home button, that i felt needed a traditional rollover.

    link removed

    Obviously it's not done yet.
    Last edited by kidwizdumb; Nov 6, 2003 at 23:36.

  14. #14
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well two reasons why I would still consider javascript(dhtml) for mouseovers:

    1) CSS mouseovers force you to use kind of a hack for IE, since it only supports the :hover psuedo class for <A> elements. You cannot attach it to a TD or TABLE to catch all events at once.

    2) CSS seems a little shaky when it comes to positioning. Not that I think it'll impose much problems on this particular occasion, but in my time reading in to CSS layouts etc, I found loads of small problems that sometimes can be fixed by weird comment-hacks, but more often cannot be fixed and produce errors like incosistent 1 pixel gaps etc. It made my overall feel about CSS a little shaky as it doesnt seem to turn out so robust as many people seem to think it is.

    Note I said 'consider' though, it's a bit of a tradeoff, and I think both methods are equally suitable.


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
  •