Preload images using css

Question

Is this an acceptable way to preload images, compared to some js code inside of html / head

body:after{
    display:none;
    content:
    url(img1.jpg)
    url(img2.jpg)
    ...
}

js way

$.preload = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preload("img1.jpg","img2.jpg");

Neat that in your question you compared the CSS vs, JS preload methods. I'm using some images in a dynamically generated HTML fragment, and just discovered that for me the CSS preloader has been the correct way to get cached images. — deblocker
– deblocker, Commented Jul 18, 2017 at 9:31

imbondbaby · Accepted Answer · 2014-06-22 17:35:26Z

9

The concept behind it is to place the background images on a pseudo-element that is loaded when the page loads but is not shown. This causes the browser to load the images so that when they are called later by another element they are ready to go.

This can be used to preload the images and swap them on hover. The "preload" div has no height/width since the images are set to background, so it doesn't show on the page, and the images are ready when you want to swap them on hover. (you will obviously have to set height/width on the anchors. I'm just showing minimal CSS here to get the point across)

HTML:

<div id="preload"></div>
<div id="icons">
    <a href="http://..." class="button-1"></a>
    <a href="http://..." class="button-2"></a>
    <a href="http://..." class="button-3"></a>
</div>

CSS:

#preload  {background: url('pic1b.png'), url('pic2b.png'), url('pic3b.png');}
.button-1 {background: url('pic1a.png');}
.button-2 {background: url('pic2a.png');}
.button-3 {background: url('pic3a.png');}
.button-1:hover {background: url('pic1b.png');}
.button-2:hover {background: url('pic2b.png');}
.button-3:hover {background: url('pic3b.png');}

Obviously, there are many other ways and the post above shared a link that include many others.

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

edited Jun 22, 2014 at 17:35

answered Jun 22, 2014 at 17:18

imbondbaby

6,4313 gold badges23 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

qadenza Over a year ago

why display inline? This is default, isnt't it? And why width:0 and height:0? Wouldn't be better display:none?

imbondbaby Over a year ago

The "preload" div has no height/width since the images are set to background, so it doesn't show on the page, and the images are ready when you want to swap them on hover.

imbondbaby Over a year ago

I have posted a great example, please let me know if it was helpful

qadenza Over a year ago

Yes, your efforts are really useful for me, and I upvoted it, thanks a lot, but I already accepted the ndm13's answer.

ndm13 · Accepted Answer · 2014-06-22 17:10:43Z

3

I suppose that method would work, as long as the image isn't dynamically generated. The only issue with preloading using just CSS seems to be that the images download WITH the page, not after it. You can trigger the JavaScript event after the pageload is over.

Further reading: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

answered Jun 22, 2014 at 17:10

ndm13

1,23914 silver badges20 bronze badges

Comments

bur · Accepted Answer · 2018-03-06 16:27:38Z

2

On firefox, at least, the images don't get cached with display: none. Instead you can set:

body:after {
width: 0; height: 0; overflow: hidden; display: block;
content:    url('img1')
            url('img2')
            ...;
}

answered Mar 6, 2018 at 16:27

bur

8998 silver badges22 bronze badges

Collectives™ on Stack Overflow

Preload images using css

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related