: Is traditional JavaScript image pre-loading taboo 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

@Rambettina238

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.

Vote Up Vote Down

@Shelley277

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.

Vote Up Vote Down