PDA

View Full Version : Resolved The Best Image Preloading Script



KennyP
12-30-2014, 02:55 AM
Of all the ways to preload images for web pages, what is the best javascript / image preloading script for modern browsers?

Beverleyh
12-30-2014, 10:01 AM
Is there and specific reason why you want a JavaScript preloading method?

I wouldn't recommend a JavaScript method of preloading images anymore, unless it was part of a larger gallery script or slideshow. CSS can preload images very easily, in a few ways - one of the most lightweight methods nowadays being with multiple background images on a pseudo element (good for modern browsers and IE9+);
body:after {
display: none;
content: url(path/to/image/sprites.png) url(path/to/image/banners.jpg);
}Without knowing more about your requirements, or what browsers you're supporting, this would be my first recommendation.

There are other ways to preload with CSS that require either sprites or extra element markup - or both - so for images that you *know* you will need on a lot of pages (template images), you could do (supports all browsers);
<body>
<img src="path/to/sprite.png" width="0" height="0" style="border:0" alt=""/>The reason I would use an <img> tag rather than a <div> with background image set via CSS, is that loading sprites in a hidden <img> tag is faster - CSS images are only downloaded once browsers are sure they're needed but <img> are loaded immediately. More info on that here: http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/#section:dns-prefetching

So, for simplicity I'd go with CSS preloading (background images and sprites), but it depends on what else is going on in your page and how the markup is being generated (or what you have access to edit).

KennyP
12-30-2014, 02:20 PM
Thank you for your reply Beverleyh.

If sprites are pngs with multiple images, there are none on the site. I was hoping to be able to preload jpg
images on a splash/welcome page, so that they would be cached before needing to display on the next
page. I used to do it with a css method, and it worked. But then it stopped working with newer browsers.

Would the code you posted work to preload images as I described?

Beverleyh
12-30-2014, 03:07 PM
I used to do it with a css method, and it worked. But then it stopped working with newer browsers.I don't know what method you used previously but the only way I can think of this being the case is if you put elements with background images inside a parent div and set the *parent* to display:none;? That will stop the child background images downloading in most common, modern browsers, where they probably did download before. See Test 3 here http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Sprite images can be any format - they're not just reserved for png. And yes, you can preload any image with CSS - using either method that I posted (a psuedo or div element with one/multiple background images, sprites or single images).

KennyP
12-30-2014, 10:40 PM
I tried the body:after method you posted and it works just great!

Thank you so much Beverleyh