10

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");
qadenza
  • 9,025
  • 18
  • 73
  • 126
  • 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 Jul 18 '17 at 09:31
  • Your CSS method works for me, thank you. – Liran H Nov 23 '17 at 12:36

3 Answers3

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/

imbondbaby
  • 6,351
  • 3
  • 21
  • 54
  • why `display inline`? This is default, isnt't it? And why `width:0` and `height:0?` Wouldn't be better `display:none`? – qadenza Jun 22 '14 at 17:22
  • 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 Jun 22 '14 at 17:29
  • I have posted a great example, please let me know if it was helpful – imbondbaby Jun 22 '14 at 17:33
  • 1
    Yes, your efforts are really useful for me, and I upvoted it, thanks a lot, but I already accepted the ndm13's answer. – qadenza Jun 22 '14 at 17:41
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/

ndm13
  • 1,189
  • 13
  • 19
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')
            ...;
}
bur
  • 604
  • 5
  • 20