Bootstrap carousel: Make download next image when using background-image on div instead of img

Question

Prequel: I am using Bootstrap Carousel . Since I want to use background-size: cover, I am using a div with background-image set, instead of the default .

The issue: For some reason, the carousel doesn't seem to preload the next image. When I click next image, I can see the image being downloaded. Unfortunately, I think because of this lack of preloading the images aren't getting the right size (Set by JS) in some browsers:

Anyway to make it preload all the images in the carousel?

Answer 1

This seems to work great. Just place this with your images in the url() outside of the carousel.

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

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