fadeIn() 효과가있는 이미지 배경로드

Question

로딩이 완료되면 fadein() 효과가있는 div 배경을 표시하려고합니다.

내가 검색 한 결과가 가까울수록 this topic (<img> 태그에서 잘 작동 함)이었습니다.

div의 CSS 배경 속성과 똑같이하고 싶습니다.

HTML

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

CSS

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

$(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'); 
    }); 
}); 

jQuery를 : 여기 코드 나는 일에 '노력 해요입니다

잘 작동하지 않는다는 점을 제외하면 나에게 잘 보입니다. 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/