Preload background images with jQuery?

Question

I have a div thats currently set to display none, The Div has a background image that is approx 5000px wide, 2000px high.

I toggle the div display attirbute with jquery on a button click only with the image being so big the div loads and the image loads 1/2 seconds afterwards; is there a function where I can show a preloader until the image is ready and then display it?

Thanks

score 5 · Answer 1 · edited May 23 '17 at 12:01

5

This question was posted up a while back and answered just using vanilla javascript, but can be adapted to your scenario pretty easily.

Preloading CSS Images

$(document).ready( function() {

    var c = new Image();

    c.onload = function(){
        $("#Your Div ID").css("background-image", "url(Path to Background Image)");  
    }

    c.src = "Path to Background Image";

});

edited May 23 '17 at 12:01

Community

1
1

answered Feb 21 '12 at 15:20

JustinW

271
1
6

1

Just creating an event handler for when the image is loaded, which will apply the image to your div as a background. In your case, you'd want to make it into a function where you'd show your preloader first, then execute the code above to show the image when it's available (and hide your preloader). For more details on the image object: http://www.w3schools.com/jsref/dom_obj_image.asp – JustinW Feb 21 '12 at 15:41

score 1 · Accepted Answer · answered Feb 21 '12 at 15:12

1

Try to use native javascript's Image object to preload the image.

Also consider about to avoid using such huge images on the web by making tiles for example.

answered Feb 21 '12 at 15:12

YuS

2,025
1
15
24

score 0 · Answer 3 · edited Feb 22 '12 at 15:35

0

try this:

http://ditio.net/2010/02/14/jquery-preload-images-tutorial-and-example/

edited Feb 22 '12 at 15:35

arrowd

33,231
8
79
110

answered Feb 21 '12 at 15:13

Maetschl

1,330
14
23

Preload background images with jQuery?

3 Answers3

Linked