JavaScript – 预加载图像

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

所以，这就是我得到的：

我有一个#photo_place ，它是保存主要照片的div。 这取决于用户选择的缩略图。 当用户选择缩略图时，会触发此function：

 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