3

I remember the good-old-days (not really) back when I was still sucking the teet of Dreamweaver to build websites and the lure of playing copypasta with fancy built-in scripts (ex, image-swap) was like black magic.

I'm pretty far removed from that now days but I was adapting a small site from it's original FrontPage (::cringe::) format to a standard HTML/CSS implementation and couldn't help wondering... should I should re-implement the JavaScript image pre-loading into the current version? Or, is there a better way?

I don't want to block the page from loading by requiring the user to request all the assets withing the page by using the traditional JavaScript pre-loader method. I value giving the user something to look at ASAP, and there's some potential harm to my Google mojo by doing so.

Is there a cleaner solution to prevent unnecessary page-reflows during loading? Such as, setting the static width/height dimensions through a CSS style attribute on the image element.

Improve this question
3
  • Please avoid mixing 2 or more questions. Some people just want to answer to one and it makes it confusing to the readers. Besides how will you accept the best answer?
    – Osvaldo
    Apr 8, 2012 at 6:44
  • @Osvaldo I don't see the problem, both are related and not mutually exclusive. I tend to say too much in my questions so here's the simple version. Is pre-loading images through javascript still standard practice in web development; If not, is there a viable CSS alternative?
    – Evan Plaice
    Apr 8, 2012 at 18:50
  • @EvanPlaice - You don't see the problem because you're not the one answering the question. Besides, you might get more question upvotes if you split up questions :)
    – jmort253
    Apr 8, 2012 at 23:00

2 Answers 2

Reset to default
5

Preloading images used in other pages can be done without interrupting current page loading. You can load the extra images after all the assets from the current page have finish loading.

Use the window.onload JavaScript event (or the $(window).load event if you use jQuery) to start loading the images needed to render the next page.

Improve this answer
2
  • I think you mean $(document.ready) not $(window).load. $(window).load fires after the whole page and all included images have been successfully loaded (ie, event is fired too late in the execution chain). See 4loc.wordpress.com/2009/04/28/documentready-vs-windowload.
    – Evan Plaice
    Apr 8, 2012 at 18:46
  • 2
    I understood you wanted to preload images to be used in other pages/ajax calls, so loading them is faster. And in that case $(window).load is the right answer because you just want the browser to cache them.
    – Osvaldo
    Apr 8, 2012 at 21:56
4

Specifying image dimensions in HTML and/or CSS has always been recommended since the days of HTML 2.0, and eliminates the need for page reflows due to delayed image loading.

That takes care of static images. The other case is images that won't show up until after the page has loaded.

For simple things like rollover effects, you should be using background images and the CSS :hover selector, which AFAIK will be preloaded in most modern browsers. Or, better yet, use CSS sprites, which guarantee preloading and speed up image loading in general.

For more advanced things like image sliders, you do need some JavaScript. For those, when possible, I'd recommend using an existing script that will take care of preloading and other technical details in an efficient and well tested way.

Improve this answer
4
  • Nice. I have been using :hover and sprites all along but it's interesting that JS image pre-loading can still be made useful for non-static content. Does that hold true for all images that the user 'may' see (ex full size image after clicking on thumbnail). It has been a while since I've done a site from scratch, and 'best practices' have evolved.
    – Evan Plaice
    Apr 8, 2012 at 21:31
  • 2
    background-images only referenced in the :hover pseudo-class won't be preloaded by the browser. But as you say, "CSS sprites" will 'preload' the image, simply because it is the same image that is used in the unhovered state and displayed when the page first loads.
    – MrWhite
    Apr 9, 2012 at 10:45
  • @w3d: Hmm, you seem to be right. I just ran a quick test, and it does seem that at least Firefox 11 does not preload images only referenced in :hover. I stand somewhat surprised, but corrected.
    – Ilmari Karonen
    Apr 9, 2012 at 12:45
  • @w3d Interesting. If that's the case, I guess I'll have to update my navigation sprite to include both states.
    – Evan Plaice
    Apr 9, 2012 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.