1

fadein()我正在尝试在完成加载时显示具有效果的 div 背景。

我一直在搜索，我越接近这个主题<img>（在标签上效果很好）。

我想对 div 的 css 背景属性做同样的事情。这是我正在尝试工作的代码：

HTML

<div id="some_target"></div>

CSS

#some_target {
  position: absolute;
  width: 100%; height: 100% ;      
}

jQuery

$(document).ready(function() {
var newImage = "url(http://vanusasousa.com.br/sicom/img/background2.jpg)"; //Image name

  $("#some_target").hide() //Hide it
    .one('load', function() { //Set something to run when it finishes loading
      $(this).fadeIn(); //Fade it in when loaded
    })
    .css('background', newImage) //Set the background image
    .each(function() {
      //Cache fix for browsers that don't trigger .load()
      if(this.complete) $(this).trigger('load');
    });   
});

对我来说它看起来不错，但它不起作用。这是我正在工作的 jsFiddle 。

有谁知道我做错了什么？

感谢大家。

4

1 回答 1

3

.load并且.complete不适用于div。只需创建一个<img>并使用它的触发器来正确更新 div。

var newImage = "http://vanusasousa.com.br/sicom/img/background2.jpg";
$("#some_target").hide().css('background', 'url(' + newImage + ')');
var $img = $("<img>").attr('src', newImage).one('load', function () {
    $("#some_target").fadeIn();
});
if ($img.get(0).complete) {
    $("#some_target").fadeIn();
}

http://jsfiddle.net/DfFhp/2/

于 2013-05-03T21:53:15.997 回答