我正在制作照片库,我希望能够在加载主图像之前显示 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,但类似的东西应该可以正常工作吧?
有什么想法吗?
谢谢
最佳答案
也许您正在寻找这样的东西?
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;
}
关于JavaScript - 预加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10464970/