Geek asks and answers

JavaScript - Image Preloading

I am working on a photo gallery and I would like to have an idea in front of the gif loader before loading the main image, and then show the main image.

So this is what I got:

I have one #photo_place, which is a div that contains the main photo. This varies depending on which sketch the user selects. When the user selects a thumbnail, this function is launched:

function gallery(icon){

    $('#photo_place').css('background-image','url("../images/'+icon+'.png")');

}

Now, firstly, show the gif preloader in #photo_place, upload the selected image ... somewhere, and when that image is loaded, replace the preloader with the main image.

So maybe something like this?

function gallery(icon){
    $('#photo_place').css('background-image','url("../images/preloader.gif")');
    load.in.image'images/'+icon+'.png';

    if(load.in.image == true){
        $('#photo_place').css('background-image','url("loaded image")');
    }
}

Of course, it was not real JS, but should something like this work correctly?

Any ideas?

thank

+3
1

, - ?

function gallery(icon) {
   var preLoader = '../images/preloader.gif';
   var imagePath = '../images/' + icon + '.png';

   $('#photo_place').css('background-image','url("../images/preloader.gif")');

   var image = new Image();

   image.onload = function() {
      $('#photo_place').css('background-image', imagePath);
   }
   image.src = imagePath;
}

: http://www.javascriptkit.com/jsref/image.shtml

+5

More articles:


All Articles