使用fadeIn（）效果加載圖像背景

Question

我試圖在完成加載時顯示帶有fadein()效果的div背景。

我一直在尋找和接近我得到的是this topic（這對<img>標籤很有效）。

我想要做一個完全相同的CSS的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不適用於divs。只需創建一個<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/