jQuery를 이미지로드, 내가 이미지를 미리로드하려면 다음 코드를 사용하고 여러 사업부의

Question

에 추가 : 그것은해야처럼이가 작동

$('<img src="'+ Image +'">').load(function() { 
    $(this).appendTo('#background'); 
    $('#background').show(); 
}); 

. 그러나 이미지를 여러 div에 추가하려고하면 마지막 div에만 이미지가 추가됩니다.

아이디어가 있으십니까? 나는이 시도했지만 결과가없는 한

: 당신 제공 JS 코드에 참조로

$(this).appendTo('#background, #second-div'); 

Answer 1

. 을 id으로 선언했다고 가정합니다. 클래스으로 신고하고 아래 스 니펫을 대체하십시오. 잘하면, 나는 그것이 작동하는 것 같아요.

$('<img src="'+ Image +'">').load(function() { 
    $(this).appendTo('.background'); 
    $('.background').show(); 
}); 

Answer 2

개 이상의 요소를 일치 .appendTo, jQuery will clone your reference element에 선택 전달하는 경우 - 모든 이벤트 리스너와 을 - 그리고 복제 된 요소를 추가합니다.

참조 요소는 onload listener가있는 이미지이므로 추가 된 요소는 onload listener가있는 이미지이기도하고 무한 수의 이미지를 생성하게됩니다.

"작동하지 않는"것으로 나타나고 브라우저에 이미지가 넘치지 않는 이유는 숨겨진 컨테이너에 이미지를 추가하고 있기 때문에 전화가 .show에 도달하지 않기 때문일 수 있습니다.

Fiddle with infinite images

Fiddle with one image

이 솔루션은 의견 제안하기 전에 자신을 .clone() 전화로 :

하나 개의 솔루션은 load 콜백 정확히 한 번 발사되었는지 확인 jQuery의 one 처리기를 사용하는 것 새로운 단일 타겟에 이미지를 추가하는 것은 .clone()이 아니고 .clone(true)이 아니기 때문에 정확하게 작동합니다. .appendTo은 내부적으로 수행하며 복제 된 객체에 대해 청취자가 보존되도록하는 원인이기도합니다.

Fiddle with clone