[英]JavaScript - Preload Images
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. 我正在制作一个照片库,我希望能够在加载主图像之前显示一个gif预加载器,然后显示主图像。
So, this is what I got: 所以,这就是我得到的:
I have a #photo_place
which is the div that holds the main photo. 我有一个#photo_place
,它是保存主要照片的div。 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")');
}
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. 现在,我想要的是,首先,在#photo_place显示预加载器gif,加载所选图像......某处,当加载该图像时,用主图像替换预加载器。
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, that wasn't real JS, but something like that should work right? 当然,这不是真正的JS,但这样的东西应该正常吗?
Any ideas? 有任何想法吗?
Thanks 谢谢
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;
}
Also checkout Image class reference: http://www.javascriptkit.com/jsref/image.shtml 另外结帐Image类参考: http : //www.javascriptkit.com/jsref/image.shtml
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.