JavaScript-预加载图像 [英] JavaScript - Preload Images

问题描述

我正在照相馆上，我希望能够在加载主图像之前先显示gif预加载器，然后再显示主图像.

I'm working on a photo gallery, and I would like the ability to have a gif preloader show before the main image is loaded, and then show the main image.

所以，这就是我得到的:

So, this is what I got:

我有一个#photo_place，它是保存主照片的div.这取决于用户选择的缩略图.当用户选择缩略图时，将触发此功能:

I have a #photo_place which is the div that holds the main photo. This changes depending on what thumbnail the user selects. When the user does select a thumbnail, this function is triggered:

function gallery(icon){

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

}

现在，我要首先在#photo_place处显示一个预加载器gif，然后将所选图像加载到某处……然后在加载该图像时，用主图像替换该预加载器.

Now, what I want, is to first, show a preloader gif at the #photo_place, load in the selected image ... somewhere, and when that image is loaded, replace the preloader, with the main image.

那么也许是这样吗?

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，但是类似的东西应该可以正常工作吗?

Of course, that wasn't real JS, but something like that should work right?

有什么想法吗?

谢谢

推荐答案

也许您正在寻找类似的东西?

Perhaps you're looking for something like this?

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

Also checkout Image class reference: http://www.javascriptkit.com/jsref/image.shtml

这篇关于JavaScript-预加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！