Question

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

我一直在寻找，我得到的距离越近this topic（在<img>标签上效果很好。）

我想用div的css background属性做同样的事情。这是我正在努力工作的代码：

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/

使用fadeIn（）效果加载图像背景

1 个答案: