자바 스크립트 이미지 배열 미리로드 속도 및 메모리에서 제거

Question

나는 asp.net MVC 응용 프로그램을 볼 수있는 이미지의 번호를 표시 할 수 있습니다. 이러한 이미지의 수는 그룹당 100에서 2500 사이에 울 렸습니다. 보기에서 각 그룹의 이미지를 미리로드 한 다음 드롭 다운 목록에서 다른 그룹을 선택하면 페이지가 새로 고쳐집니다. 첫 번째 예하 중은 훌륭하지만 그룹을 변경하면 매우 느립니다. 이러한 이미지에 대한 참조는 MS SQL 데이터베이스에 있으며, 특정 그룹에 대한 이미지 목록은 컨트롤러 (C#)를 통해 제공됩니다. 나는

 var impath = $("#ImagePath").val(); 
     var im = $("#ImageName").val(); 

     var images = null; 
     var images = []; 
     var tochar = $("#lastchar").val(); 


     function preload_images() { 

      var i; 
      for (i = tochar; i < sl; i++) { 
       images[i] = new Image(); 
       var name = impath.toString() + im.toString() + i; 

      } 
     } 

내 질문이 프리로드 과정을 빠르게 할 수있는 방법이있다, 나는 다음 그룹을로드하기 전에 메모리에서 사전로드 이미지를 제거해야 할 방법 수 있습니다 여기에 자바 스크립트 내가 사용하고 있습니다 그들을 삭제, 나는 이미지 = null을 사용하여 이것이 올바른 방법입니다. 미리 감사드립니다.

Answer 1

많은 이미지를 처리하는 가장 좋은 방법은 스프라이트를 사용하는 것입니다. 스프라이트를 사용하면 많은 작은 이미지가 포함 된 하나의 큰 이미지를로드 할 수 있습니다. 단일 이미지를로드하는 것이 많은 이미지를로드하는 것보다 브라우저에서 훨씬 빠르기 때문에 미리로드하는 것이 훨씬 빠릅니다. 실제로 문자 그대로 전체 하위 이미지가 들어있는 이미지 하나를 사전로드 할 수 있습니다.

그런 다음 해당 이미지 중 하나를 표시하려면 이미지의 잘린 부분 만 표시합니다. 디스플레이를 수행하는 데는 여러 가지 방법이 있지만 일반적인 방법은 원하는 셀 크기의 객체를 만들고 더 큰 이미지의 원하는 부분과 일직선이되도록 적절한 오프셋을 가진 배경으로 더 큰 이미지를 표시하는 것입니다. 당신은이 기술을 사용하여 서버 측에서 해당 스프라이트를 작성해야합니까 http://css-tricks.com/css-sprites/

:

여기에 CSS 및 스프라이트에 유용한 참고 자료입니다.

---

다른 질문에 대한 답변입니다.

아니요, 더 적은 이미지를로드하는 것 (위에서 제안한 것) 또는 각 이미지의 크기를 줄이는 것 이외에는 더 이상 속도를 높일 수 없습니다. 브라우저는 한 번에 N 개의 이미지 요청 만하고 (네트워크 오버로드를 피할 가능성이 높습니다) 나머지는 한 번 완료 될 때까지 대기하고 다음 요청이 이루어질 때까지 기다립니다.

당신이 더 이상 그들에 대한 참조를 가지고 있지 않다는 것을 확인함으로써 메모리에서 이미지를 공개하십시오. 그렇게하면 브라우저 가비지 컬렉터가 사용자가 만든 Image() 객체를 정리합니다. 코드 설정 images = null 또는 images = []에서 그 Image() 오브젝트가 다른 곳에서 참조되지 않는 한이를 수행합니다. 이미지는 여전히 브라우저의 캐시에 남아 있으며 기본적으로 사전로드됩니다 (다시 참조 할 경우 네트워크를 통해로드 할 필요가 없습니다).