게으른 전체 이미지가 아닌 전체 DIV로드

Question

사이드 스크롤러 인 웹 페이지가 있습니다. 현재 모든 콘텐츠가 페이지로드에로드되지만 이것은 거대한 페이지로 변하고 있습니다! 이미지에 게으른로드를 적용했지만 ... 부드럽 지 않고 페이지가 탐색하기가 어색하다고 느낍니다.

7 개의 "창"이 있으며 각 창에는 고유 ID가있는 상위 DIV 태그가 있습니다. 내가하고 싶은 것은 창 2가 나타나고 로딩 GIF가 표시되고 모든 콘텐츠/이미지가로드 될 때까지 div가 비어있는 경우입니다. 콘텐츠/이미지가로드되면 로더가 사라지고 내용이 페이드 인됩니다.이 작업은 모든 창 2 - 7에서 반복됩니다.

수많은 jquery 스크립트와 메소드를 살펴 보았지만 이 일을 구체적으로하는 방법에 대해 내 머리를 감쌌다. 게으른로드와 같지만 이미지가 아닌 전체 div에 해당합니다. 백그라운드로 페이지를로드하고 싶지만 예를 들어 사용자가 아직 다운로드하지 않은 창 3을보고 이미지 로딩의 어색한 광경을 보지 못하도록합니다.

더 쉽게 알 수 있습니까? 내가 뭘 놓치고 있니? 거기

이

$.get('slide2.html', function(respHTML) { 
    $(respHTML).appendTo($("#contentFrame")); 
},'html'); 

당신이 그들을 HTML을 추가하기 전에 모든 이미지를 선택하고 미리로드 : 내가 추측이를 달성하기 위해 여러 가지 방법이 있습니다

Answer 1

, 쉬운 일이 jQuery를 활성 슬라이드 실제 HTML을 얻을 방법을 얻을 사용 단순히 이미지

var respHTML = $(respHTML); 
var imagesToPreload = respHTML.find('img'); 
var imagesPreloaded = 0; 
var imagesLength = imagesToPreload.length; 
imagesToPreload.each(function(i,img) { 
    // preload img 
    imagesPreloaded++; 
    if(imagesPreloaded == imagesLength) { 
     // your images are ready 
    } 
}); 

Answer 2

당신은 아마 jQuery를위한 appear plugin을 원하는를 미리로드하는 다양한 방법도 있습니다.

Answer 3

당신은 내가 여기에 게으른 이미지 로딩 한 것과 유사한 전환 및 미디어 쿼리와 CSS 트릭 사용할 수의 http://podlipensky.com/2013/06/css-only-load-images-on-demand/