Загрузить изображение фона с эффектом fadeIn()

Question

Я пытаюсь показать фон div с эффектом fadein(), когда он завершит загрузку.

Я искал, и чем ближе у меня был this topic (он отлично работает на теге <img>).

Я хочу сделать то же самое с базовым свойством css div. Вот код, я пытаюсь работать:

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/