我有一个网页使用大图像作为背景。我希望使用jQuery加载图像一旦下载(基本上是bing.com加载其背景图像的方式)。这可能与jQuery吗？如果是这样，你会推荐一个插件吗？
解决方法
这个
article可能是有用的。从那里复制：
HTML
<div id="loader" class="loading"></div>
CSS
DIV#loader {
border: 1px solid #ccc;
width: 500px;
height: 500px;
}
/**
* While we're having the loading class set.
* Removig it,will remove the loading message
*/
DIV#loader.loading {
background: url(images/spinner.gif) no-repeat center center;
}
使用Javascript
// when the DOM is ready
$(function () {
var img = new Image();
// wrap our new image in jQuery,then:
$(img)
// once the image has loaded,execute this code
.load(function () {
// set the image hidden by default
$(this).hide();
// with the holding div #loader,apply:
$('#loader')
// remove the loading class (so no background spinner),.removeClass('loading')
// then insert our image
.append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image,react accordingly
.error(function () {
// notify the user that the image could not be loaded
})
// *finally*,set the src attribute of the new image to our image
.attr('src','images/headshot.jpg');
});
