Pre-loading images?

  • I’m trying to use a rollover image on the following blog : https://www.thecowgoddess.com/wordpress
    and when I test it works well. When my friend tests, she says it ‘breaks up and looks funny’ when she clicks the header links.
    I assume this is a problem with the preloading? is it not preloading? Is there some simple WP way to pre-load images?
    I did several searches but every search I did had no results.

Viewing 2 replies - 1 through 2 (of 2 total)

  • What browser are you using, and is she using. It looks fine in FF, but IE is another beast….

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    It looks a little strange on IE in general, but the 5 image rollovers at the top of the page appear to work okay for me. But on both FF and IE, it takes a second for the first rollover to work. Pre-loading will eliminate that minor delay.

    The best way to preload images is a little CSS trick.

    Add this to your style.css somewhere:
    .hiddenPic {display:none;}

    Then you can preload images pretty much anywhere you like on the page. Preferably near where they will actually be used. You preload them like so:
    <img src="image_to_preload.jpg" height="100" width="100" class="hiddenPic">

    Obviously, you want to change the width and height and such. You may also need to add an alt and a title to make the page pass an XHTML validation.

    Anyway, the hiddenpic basically just makes the image not displayed. But the browser still loads and caches it. Works in any CSS capable browser.

    Downside of this trick is that non-CSS browsers will show the images. But then, your page already looks like total hell without the CSS (as do most modern pages), so it’s probably not worth worrying about in that case.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Pre-loading images?’ is closed to new replies.

Tags