jQuery로 이미지로 내용 미리로드하기

Question

jQuery에서 .load()를 사용하여 HTML 컨텐츠를로드하지만,이 컨텐츠에는 3/4 이미지가 임베드되어 있습니다. success 이벤트는 모든 HTML이로드되고 실제 이미지가 아닌 .load()에서만 실행됩니다. 페이지의 전체 내용을 미리로드하는 방법을 아는 사람이 있습니까?

$('#ajax_loader').hide().load('page.html',function(){ 
    $(this).fadeUp(1000); 
}); 

이 다음 코드로드 (예. page.html), (그것의 나머지는 전체 응용 프로그램에) 내 간단한 코드입니다

<div> 
    <div id="slideshow"> 
    <img src="images/img1.jpg" /> 
    <img src="images/img2.jpg" /> 
    <img src="images/img3.jpg" /> 
    </div> 
    <p>This is some sample content</p> 
</div> 

Answer 1

성능 저하로 인해 이미지가로드 된 후에 fadeIn 애니메이션을 사용하지 않는 것이 좋습니다. fadeIn 콘텐츠에 다음 이미지로드를 시작하는 것이 좋습니다. 가능한 한 많은 사용자가 애니메이션을 원활하게 사용할 수 있습니다.

당신이 그것을 고수하려는 경우 물론 당신이 원래의 목표를 달성 할 수 있다고 말했다 갖는
이미지 src 속성으로 1x1 크기의 빈 이미지를 사용하고 title에 실제 URL을 저장합니다.

<div> 
    <div id="slideshow"> 
    <img src="blank.gif" title="images/img1.jpg" /> 
    <img src="blank.gif" title="images/img2.jpg" /> 
    <img src="blank.gif" title="images/img3.jpg" /> 
    </div> 
    <p>This is some sample content</p> 
</div> 

그리고 당신의 코드가된다 :

이

$('#ajax_loader').hide().load('page.html', function(){ 
    var c = 0; 
    var images = $("#slideshow img"); 
    images.load(function(){ 
    if (++c == images.length) { 
     $('#ajax_loader').fadeIn(1000); 
    } 
    }); 
    images.each(function(){ 
    this.src = this.title; 
    }); 
}); 

Answer 2

이미지는 별도의 HTML 요청과 함께로드됩니다 분명히 브라우저는 응답의 HTML이 파싱 될 때까지로드를 시작할 수 없습니다.

콘텐츠를로드하기 전에 이미지의 URL을 알고 있다면 "이미지"요소를 만들고로드 할 때까지 기다릴 수 있습니다 (즉,로드 이벤트를 개별적으로 처리하여 미리로드 할 수 있음).

var imgUrls = [ "images/img1.jpg", "images/img2.jpg", "images/img3.jpg" ]; 
var c = 0; 

for (var i = 0; i < imgUrls.length; ++i) { 
    var img = new Image(); 
    img.onload = function() { 
     c += 1; 
     if (c == imgUrls.length) { 
     // at this point all images are loaded 
     // ... 
     } 
    }; 
    img.src = imgUrls[i]; 
} 

편집 — @galambalazs 핸들러 주변의 폐쇄가 필요 (이 경우)이라고 지적했다.

Answer 3

체크 아웃 this similar situation

이 문제에 대한 주요 수정이 .ready의 올바른 사용과 .load 운영자 될 것으로 보인다. 제대로 사용되면 응답을 처리기에 전달하기 전에 모든 요소와 미디어 항목이 브라우저에로드 될 때까지 기다릴 수 있습니다. 나는 너무 많이 plagerize하고 싶지 않다 :) 그리고 그것의 정말 좋은 대답.