2016-08-03 8 views
0

저는보기 당 85.000 개 이상의 이미지를 사용하는 래스터 타일 (리플릿)을 사용하여 360도 뷰어를 작성합니다. 는 미안 모든 이미지를 캐시하려고 뷰어의 성능을 향상 시키려면,하지만 웹 브라우저는 항상 반환 : 순 ::JS로 이미지 캐싱

그래서 제 질문은, 이러한 문제를 방지 할 수있는 방법이있다 ERR_INSUFFICIENT_RESOURCES를?

저는 이것을 수행하기 위해 setInterval(foo, 1000)을 사용하고 있습니다. 다음과 같이 입력하십시오 :

function restImg() { 
    counter = setInterval(ld, 2000); 
} 

function ld() { 
    if (!(nmb >= 80)) { 
     for (var i = 0; i < images.length; i++) { 
      var idx = images[i].indexOf("-"); 
      var path = images[i].substr(0, idx + 1); 
      nmb = parseInt(images[i].substr(idx + 1, 3)); 
      var rest = images[i].substr(idx + 4, images[i].length); 
      nmb++; 
      var img = ""; 
      if (nmb <= 9) { 
       images[i] = path + "00" + nmb + rest; 
       img = new Image(); 
       img.src = images[i]; 
      } else { 
       images[i] = path + "0" + nmb + rest; 
       img = new Image(); 
       img.src = images[i]; 
      } 
     } 
    } else { 
     clearInterval(counter); 
    } 
} 

감사합니다.

+2

그래서 페이지를로드 할 때 85,000 개의 이미지를로드하려고합니까? 0.o 실제로 화면에 보이는 이미지 만 지연로드 해보십시오. 이 작업을 수행 할 수있는 수백 가지 플러그인이 있습니다. 이렇게하면 서버가 힙에서 떨어지는 것을 막을 수 있으며 대역폭에 많은 돈을 절약 할 수 있습니다. –

+0

확대/축소 또는 회전 할 때 뷰어의 성능이 매우 느리거나 성능이 저하되므로이 모든 이미지를 사전로드하려고합니다. 그래서 내가 이것을하기로 결심했습니다. 그것은 로컬 서버에서 잘 작동하지만 리모트에서는 작동하지 않습니다. 보이는 이미지 만로드하면 다음 이미지로드시 뷰어가 많이 지연됩니다. 이 플러그인 중 하나의 이름을 알려주시겠습니까? – victoradv

+2

@victoradv,로드 된 이미지가 적어도 너비 * 높이 * 4 바이트의 메모리를 소비한다는 사실을 알고 있습니까? 형식 또는 파일 크기에 독립적입니다. 따라서 85000 개의 이미지가 크기가 10x10 픽셀 인 경우에도 이미 32MB를 소비합니다. 모든 이미지를 사전로드하지 말고 다음에 가장 필요할 것으로 예상되는 미리로드하십시오. 2 위. 이미지 노드에 대한 참조를 유지하지 마십시오. 이미지를로드하고 브라우저 캐시에 의존하십시오. – Thomas

답변

0

이미지를 캐시하고 지연로드하기 위해 최첨단 기술은 Service Workers입니다. 이렇게하면 페이지 당 javascript에 의존 할 필요없이 브라우저의 캐시를 미세하게 제어 할 수 있습니다.