jquery - 背景图像中的淡入淡出

Question

我有一个网页，使用大图像作为背景。我希望在下载图像后使用 jQuery 来加载图像(基本上就是 bing.com 加载其背景图像的方式)。这可以用 jQuery 实现吗？如果是的话，有推荐的插件吗？

Answer 1

您可以先加载图像，然后在加载完成后将其设置为背景图像。这样浏览器将(希望)从缓存加载背景图像，而不是重新下载它。正如您所要求的，将其作为插件:

 $.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');