3

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

||||||
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.

||||||
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";

});
||||||
  • 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: w3schools.com/jsref/dom_obj_image.asp – JustinW Feb 21 '12 at 15:41
0

try this:

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

||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.