jQuery 在背景图像中淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/977090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fading in a background image
提问by Villager
I have a web page that uses a large image for its background. I was hoping to use jQuery to load the image once it is downloaded (basically the way that bing.com loads its background image). Is this possible with jQuery? If so, is there a plugin that you would recommend?
我有一个使用大图像作为背景的网页。我希望在下载后使用 jQuery 加载图像（基本上是 bing.com 加载其背景图像的方式）。这可以用 jQuery 实现吗？如果是这样，是否有您会推荐的插件？
采纳答案by kgiannakakis
This articlemay be useful. Copying from there:
这篇文章可能有用。从那里复制：
HTML
HTML
<div id="loader" class="loading"></div>
CSS
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
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');
});
回答by Pim Jager
You could first load the image, and then, when it has finished loading, set it as background-image. That way the browser will (hopefully) load the background image from the cache instead of redownloading it. As you requested it as a plugin:
您可以先加载图像，然后在加载完成后将其设置为背景图像。这样浏览器将（希望）从缓存中加载背景图像，而不是重新下载它。正如您将其作为插件请求的那样：
$.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;
}
Use it like this:
像这样使用它：
$('body').smartBackgroundImage('http://example.com/image.png');
回答by Philippe Leybaert
You can't use CSS background images, because it's impossible to attach an event to the loading of the images (as far as I know).
您不能使用 CSS 背景图像，因为不可能将事件附加到图像的加载中（据我所知）。
So I'll give it a shot, but haven't tested it:
所以我会试一试，但还没有测试过：
HTML:
HTML：
<body>
<div class="bgimage"><img src="/bgimage.jpg" ></div>
<div>
... content ...
</div>
</body>
CSS:
CSS：
.bgimage { position: absolute: }
Javascript:
Javascript：
$(function() {
$(".bgimage")
.css("opacity",0);
.load(function() { $(this).fadeIn(); });
});
回答by Ali
You can go with the following trick, sorry if its a bit dirty.
您可以使用以下技巧，抱歉，如果它有点脏。
Script :
脚本 ：
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));
}
});
Markup :
标记：
<div class="Content">
<label>Search Bing</label>
<input type="text" />
<input type="button" value="search" />
</div>
<div class="box1"></div>
css:
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;}
hope this helps
希望这可以帮助
A little sample on : http://xgreen.co.uk/test.htm
一个小样本：http: //xgreen.co.uk/test.htm
