在背景图像中褪色
我有一个网页使用大图像的背景。 我一直希望使用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'); });
您可以先加载图像，然后在完成加载后将其设置为背景图像。 这样浏览器将（希望）从caching加载背景图像，而不是重新加载它。 正如你所要求的插件：
$.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背景图像，因为不可能将一个事件附加到图像的加载（据我所知）。
所以我会给它一个镜头，但没有testing它：
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;}
希望这可以帮助
