使用 fadeIn() 效果加载图像背景

Question

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

我一直在搜索，离我越近的是this topic（在<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');
    });   
});

---

对我来说它看起来不错，但它不起作用。 Here is the jsFiddle我在工作。

有谁知道我做错了什么？

谢谢大家。

Answer 1

.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/