在背景图像中淡入淡出

我有一个使用大图像作为背景的网页。我希望在下载后使用jQuery加载图像（基本上是bing.com加载其背景图像的方式）。这可能与jQuery？如果是这样，是否有插件，你会推荐？在背景图像中淡入淡出

2009-06-10 Villager

http://www.techerator.com/2010/11/how-to-make-a-css-background-slideshow-with-jquery/作品 – TFD 2012-08-09 02:05:00

这article可能是你seful。从那里复制：

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'); 
});

来源

2009-06-10 17:49:32 kgiannakakis

您可以先加载图像，然后在完成加载后将其设置为背景图像。这样浏览器将（希望）从缓存中加载背景图像，而不是重新加载它。当你要求它作为一个插件：

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

来源

2009-06-10 17:47:36

非常感谢，但我怎样才能使背景图像淡入？ – desbest 2012-02-09 19:02:02

不能使用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(); }); 
});

来源

2009-06-10 17:47:58

-2

你可以去下面的技巧，对不起，如果它有点脏。

脚本：

 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

来源

2009-06-10 20:25:04 Ali

在背景图像中淡入淡出

回答

相关问题