题
我有一个使用一个大的图像的背景的网页。我希望能使用jQuery加载图像,一旦它被下载(基本上是bing.com加载其背景图片的方式)。这可能与jQuery的?如果是这样,有,你会推荐一个插件?
解决方案
此文章可能是有用的。从那里复制:
<强> 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');
});
其他提示
您可以首先加载图像,然后,当它已经完成加载,将其设置为背景图像。这样,浏览器会(希望)从缓存中加载的背景图像,而不是重新下载它。当你请求它作为一个插件:
$.fn.smartBackgroundImage = function(url){
var t = this;
//create an img so the browser will download the image:
$('<img />')
.attr('src', url)
.load(function(){ //attach onload to set background-image
t.each(function(){
$(this).css('backgroundImage', 'url('+url+')' );
});
});
return this;
}
使用这样的:
$('body').smartBackgroundImage('http://example.com/image.png');
您不能使用CSS背景图像,因为这是不可能的事件附加到图像的负载量(据我所知)。
所以,我给它一个镜头,但没有测试:
HTML:
<body>
<div class="bgimage"><img src="/bgimage.jpg" ></div>
<div>
... content ...
</div>
</body>
CSS:
.bgimage { position: absolute: }
使用Javascript:
$(function() {
$(".bgimage")
.css("opacity",0);
.load(function() { $(this).fadeIn(); });
});
您可以用下面的技巧去,对不起,如果它有点脏。
脚本:
jQuery.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
jQuery("<img>").attr("src", arguments[i]);
$('.box1').attr('preloadURL', arguments[0]);
}
}
$.preloadImages("sky.jpg");
$(document).ready(function() {
if ($('.box1').attr('preloadURL') == 'sky.jpg') {
$('.box1').css({ 'background-image': 'url(sky.jpg)' },$('.box1').fadeIn(1000));
}
});
标记:
<div class="Content">
<label>Search Bing</label>
<input type="text" />
<input type="button" value="search" />
</div>
<div class="box1"></div>
的CSS:
.box1 {background-repeat:no-repeat; width:800px; height:600px; display:none; position:relative;}
.Content { position:absolute; left:20px; top:20px; z-index:100;}
.Content label { color:White;}
希望这有助于
在一个小样品: http://xgreen.co.uk/test.htm
不隶属于 StackOverflow