jquery에서 div 배경을 전환하기 전에 이미지로드

Question

사용자 상호 작용에 대한 응답으로 div의 배경 이미지를 전환하려는 웹 페이지가 있습니다. 내가 지금까지 가지고있는 것은 :

function updateImg() { 
    imgurl=buildImgURL(); // constructs a URL based on various form values 
    $('#mainImage').css("background-image", "url("+imgurl+")"); 
} 

이것은 정확히 한 가지를 제외하고는 원하는대로 작동합니다. 상대적으로 큰 배경 이미지와 비교적 느린 서버 (어느 쪽도 쉽게 고칠 수 없음)의 조합으로 인해 이미지를로드하는 데 시간이 걸립니다. 따라서 updateImg() 함수가 호출되면 div는 새 배경 이미지가로드되기 전에 0.5 초 동안 흰색으로 바뀝니다. 내가 원하는 것은 새로운 이미지가로드가 끝날 때까지 오래된 배경 이미지를 유지 한 다음 즉시 전환하는 것입니다. 가능한가요?

백그라운드 이미지는 서버에서 즉시 생성되므로 클라이언트 측 캐싱 또는 사전로드가 불가능합니다.

Answer 1

이미지를 빈 요소로 설정하는 것은 어떻습니까? 그런 다음

$("<img id='loaderImg' src='"+imgUrl+"' onload='setBg(this.src)'/>"); 

이미지가

function setBg(imgUrl) { 
    $("#mainImage").css("background-image", "url("+imgUrl+")"); 
    $("#loaderImg").remove(); 
} 

이 방법을로드 이미지가 표시되지 않습니다 이미지에로드하고 배경으로 설정 이미지가 완전히로드 된 경우 (할 것 또한 캐싱 됨)

테스트하지 않았지만 작동해야한다고 생각합니다.

Answer 2

background-image 속성을 이미지로 설정 한 CSS 클래스를 정의한 다음 updateImg() 함수에서 속성을 직접 수정하는 대신 해당 div의 클래스를 설정할 수 있습니다. 이렇게하면 문제가 완화 될 수 있습니다.

뭔가 같은 : 당신의 CSS에 다음

function updateImg() { 
    imgurl=buildImgURL(); // constructs a URL based on various form values 
    $('#mainImage').addClass('imageClassName'); 
} 

그리고 :

.imageClassName { 
    background-image: url([url to image]); 
} 

Answer 3

당신이 당신의 이미지를 프리 페치 할 수 없기 때문에, 당신이 할 수 있습니다 : "

1. 프리 페치 a를 로드 중 .. "이미지
2. "loading .. "이미지를 div의 배경으로 설정하는 동안 실제로 실제 이미지를 사용할 수있게되면 실제 이미지는 요리입니다.
3. .

jQuery를 작성해달라고 요청하지 마십시오. 그 정도로 간단 :)

건배,

주니어.