jQuery Image 프리 로더 기능이 작동합니까?

Question

모든 작은 이미지가 $ (window) .load()를로드 한 후에 링크로 참조되는 라이트 박스 갤러리의 큰 이미지를로드하는 함수를 작성했습니다.

$(window).load(function() { 
    if ($('ul#gallery').length > 0) { 
     // make a container, fill in images and attach it to the page body 
     var c = $("<div />").attr({style: 'display: none', id: 'gallerypreload'}); 
     $("ul#gallery li > a").each(function() { 
      $('<img />').attr('src', $(this).attr('href')).appendTo(c); 
     }); 
     c.appendTo('body'); 
    } 
}); 

갤러리는 다음과 같습니다 :

<ul id="gallery"> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
</ul> 

내가이 작업을 수행하려면, 브라우저를 위해 더 큰 이미지를 먼저 작은 이미지를로드 한 후 미리로드하도록되어 있기 때문에 여기에

코드입니다 보기. 또한 필자는 $ (window) .load()에 의해 트리거되는 일종의 페이드 효과를 작성했습니다.

내 질문은 다음과 같습니다. 모든 브라우저가 본체에 부착 된 이미지를 컨테이너에 미리로드합니까? 따라서 그것은 표시되지 않습니다, 이론적으로 그들은 이미지를로드해서는 안됩니까? 나는 을 사용해야 하나?

감사합니다.

Answer 1

당신은 당신이

$("ul#gallery li > a").each(function() { 
    var preload = new Image(); 
    preload.src = $(this).attr('href'); 
    $('<img />').attr('src', preload.src).appendTo(c); 
}); 

다음

IMG 태그를 볼 수 있습니다 경우 문제가되지해야합니다 여부를

---

기반을 미리로드 할 SRC와 자바 스크립트 이미지 객체를 생성하여 프리로드를 강제 할 수 아래 코멘트에서이 이미지를 미리로드하는 데 충분해야합니다.

또는 심지어

$("ul#gallery li > a").each(function() { 
    (new Image()).src = $(this).attr('href'); 
});