jQuery 이미지 미리로드/캐시 중지 브라우저

Question

간단히 말해서, 매우 큰 사진 갤러리가 있고 첫 페이지가로드 될 때 최대한 많은 미리보기 이미지를 캐싱하려고합니다. 1,000 개 이상의 미리보기 이미지가있을 수 있습니다.

첫 번째 질문 - 미리로드하거나 캐시하려고하면 어리석은가요?

두 번째 질문 - preload() 함수가 실행되면 브라우저 전체가 1-2 분 동안 응답을 중지합니다. 콜백이 발생하면 미리로드가 완료됩니다. 이 많은 객체를로드하려고 할 때 사용자 경험/속도를 저해하지 않는 "스마트 사전로드"를 수행 할 수있는 방법이 있습니까?

$.preLoadImages 기능은 여기에서 걸릴 수 있습니다 : http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html

여기에 내가 그것을 구현하는거야 방법은 다음과 같습니다

$(document).ready(function() { 
    setTimeout("preload()", 5000); 
}); 
function preload() { 
    var images = ['image1.jpg', ... 'image1000.jpg']; 
    $.preLoadImages(images, function() { alert('done'); }); 
} 

1000 이미지가 많이 있습니다. 너무 많이 묻는거야?

Answer 1

미리로드 된 스크립트를 살펴본 후 스크립트는 다음 이미지로 이동하기 전에 하나의 이미지가로드 될 때까지 기다리지 않는 것으로 보입니다. 이것이 브라우저가 멈추는 원인이라고 생각합니다. 브라우저에 100 개의 이미지를 동시에로드 할 것을 말합니다.

더 좋은 방법은 재귀 함수를 사용하여 첫 번째 이미지가 완료된 후에 만 ​​다음 이미지를로드하는 것입니다. 다음은 간단한 예입니다.

편집 : 스택 오버플로 오류가 발생합니다 (아래 새 버전 참조).

var preLoadImages = function(imageList, callback) { 
    var count = 0; 
    var loadNext = function(){ 
     var pic = new Image(); 
     pic.onload = function(){ 
      count++; 
      if(count >= imageList.length){ 
       callback(); 
      } 
      else{ 
       loadNext(); 
      } 
     } 
     pic.src = imageList[count]; 
    } 
    loadNext(); 
}; 

$(document).ready(function(){ 
    var files = ['file1,jpg', 'file2.jpg']; 
    preLoadImages(files, function(){ alert("Done!"); }); 
}); 

는 다시 여기에 중요한 것은 당신이 한 번에 하나 개의 이미지를 다운로드하려면 브라우저를 강제하고 있는지 확인하는 것입니다. 그 이상이면 브라우저가 완전히 끝날 때까지 브라우저가 잠길 위험이 있습니다.

-

편집 : 새로운 버전 산세 재귀. 이 제품을 1000+ 아이템 배열로 테스트했는데 오류가 발생하지 않았습니다. 내 생각은 구간과 부울로 재귀를 대체하는 것이었다. 50 밀리 초마다 함수를 폴링하고 "로드하는 모든 것"을 묻습니다. 대답이 '아니오'이면 우리는 다음 이미지를 대기열에 넣을 것입니다. 이것은 모든 것이 끝날 때까지 반복됩니다.

var preLoadImages = function(imageList, callback) { 
    var count = 0; 
    var loading = false; 
    var loadNext = function(){ 
     if(!loading){ 
      loading = true; 
      count++; 
      pic = new Image(); 
      pic.onload = function(){ 
       loading = false; 
       if(count >= imageList.length-1){ 
         clearInterval(loadInterval); 
         callback(); 
       } 
      } 
      pic.src = imageList[count]; 
     } 
    } 
    var loadInterval = window.setInterval(loadNext, 50); 
}; 

나는이 일이 어떻게 될지 궁금해합니다. 성능이 현명합니다. 계속 진행되는 다른 많은 것들이있는 전체 웹 페이지에서. 어떻게 진행되는지 알려주세요.

Answer 2

이것은 흥미로운 성능 질문입니다. 미리로드 할 때 Firebug 또는 Chrome 개발자 도구에서 어떻게 작동합니까? 이것은 내가 생각하기에 이것은 Lazy Load Plugin을 잘 사용한다는 것입니다.

레이지 로더는 JavaScript로 로 작성된 jQuery 플러그인입니다. (긴) 웹 페이지에서 이미지로드가 지연됩니다. 뷰포트 외부의 이미지 ( 웹 페이지의 보이는 부분)는 사용자 이 (으)로 스크롤하기 전에로드되지 않습니다. 이는 이미지 미리로드 의 반대입니다.