JavaScript - 预加载图像

Question

我正在制作一个照片库,我希望能够在加载主图像之前显示一个gif预加载器,然后显示主图像.

所以,这就是我得到的:

我有一个#photo_place持有主要照片的div.这取决于用户选择的缩略图.当用户选择缩略图时,会触发此功能:

function gallery(icon){

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

}

现在,我想要的是,首先,在#photo_place显示预加载器gif,加载所选图像......某处,当加载该图像时,用主图像替换预加载器.

也许是这样的？

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")');
    }
}

当然,这不是真正的JS,但这样的东西应该正常吗？

有任何想法吗？

谢谢

Answer 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;
}

另外结帐Image类参考:http://www.javascriptkit.com/jsref/image.shtml