jquery Ajax 요청 및 구문 분석 캐시하는 방법

Question

이미지 갤러리이지만 많은 이미지가있는 응용 프로그램을 작성하고 있습니다 (문서 아카이브 탐색 용). 기본적으로 응용 프로그램이 수행합니다

1. 디스플레이 이미지
2. 디스플레이 "다음"링크는 왼쪽 첫 번째 이미지

이전 및 다음 링크의 권리는 XML에서 검색 "이전"과 순서에있는 모든 심상을 목록으로 만드는 파일; 각 세트에는 약 1000-2000 개의 이미지가 있습니다 (세트 당 하나의 XML 파일). 선행 및 다음 형제 요소를 찾아야하는 것을 피하기 위해 각 이전 이미지와 다음 이미지의 이름을 각 이미지의 특성으로 포함했습니다.

그래서 XML 파일은 기본적으로 :

<list> 
    ... 
    <image previous="ww.jpg" next="yy.jpg">xx.jpg</image> 
    <image previous="xx.jpg" next="zz.jpg">yy.jpg</image> 
    <image previous="yy.jpg" next="aa.jpg">zz.jpg</image> 
    ... 
    </list> 

무엇 내가 뭘하는 것은 이것이다 :

function display(img) { 
    var lookingfor = 'image:contains('+img+')'; 
    $.ajax({ 
    type: "GET", 
    url: "pns.xml", 
    dataType: "xml", 
    success: function(xml) { 
     $(xml).find(lookingfor).each(function(){ 
     // display the actual image and the links from @previous and @next attributes 
     }); 
     } 
    }); 
    } 

$(document).ready(function(){ 
    var image = $.query.get('img'); 
    display(image); 
    }); 

처음 페이지가로드 스크립트 :

1. 가져 url 매개 변수 'img'에서 표시 할 이미지의 이름
2. 로드 t 그는이 같은 파일에서
3. 표시 이미지 이전 및 다음 이미지 지금까지

너무 좋아에

표시 링크를 이전 및 다음 이미지 이름을 모든 이미지

의 이름을 가져옵니다 포함 된 파일을 xml로. 내 문제는 다른 이미지 때문입니다.

이전 또는 다음 이미지 링크는 다음과 같습니다

display('image_id'); 

내가 페이지를 다시로드 단순히 다시 '디스플레이'기능을 호출하지 않고 내가 다시 XML 파일을 얻을 수 없을 것으로 기대했다

하고, 다시 구문 분석 할 필요가 없습니다. 그러나 XML 파일은 'display'함수가 새로 호출 될 때마다 다시로드됩니다.

처음으로 페이지를로드 할 때 상당한 지연이 발생합니다. 각 이미지에 대해 동일한 지연이 느리고 매우 불쾌한 것처럼 보입니다.

나는 애플리케이션을 완벽하게 제어 할 수 있습니다. XML 파일보다 효율적인 매개 변수를 보유 할 수있는 효율적인 솔루션이 있다면. 그러나 응용 프로그램은 오프라인으로 작업해야하므로 이전/다음 이미지의 이름을 가져 오기 위해 서버를 쿼리 할 수 ​​없습니다.

또한 : contains() 선택기를 사용하면 아마도 가장 빠른 방법이 아닙니다. 무엇이 더 좋을까요?

편집 : XML을 사용하고 외부에서로드하는 것이 분명히 최적 상태가 아니 었습니다. 훨씬 더 쉽고 간단한 접근법은 이미지 당 하나의 배열을 포함하는 큰 객체를 갖고이 객체를 한 번만로드하는 것입니다 (스크립트가 처음로드 될 때). 또 다른 방법은 로컬 스토리지/SQL 기능을 사용하는 것입니다. 이러한 도구를 제공하는 Google Gears를 사용해 보시기 바랍니다.

Answer 1

아마 Ajax 이미지 XML을 글로벌 JS 변수에 처음 입력 한 다음 후속 호출에서 JS 변수를 쿼리하면됩니다. 따라서 :

<script type="text/javascript"> 
    var imgXML = null; 

    // document ready 
    $(function() { 
    $.ajax({ 
     type: "GET", 
     url: "pns.xml", 
     dataType: "xml", 
     success: function(xml) { 
     imgXML = xml; 
     var image = $.query.get('img'); 
     display(image); 
     } 
    }); 
    }  

    // subsequent display goes straight to the XML data in memory 
    function display(img) { 
    if(imgXML != null) { 
     var lookingfor = 'image:contains('+img+')'; 
     $(imgXML).find(lookingfor).each(function(){ 
     // display image and links 
     } 
    } 
    } 
</script> 

다른 최적화가있을 것이라고 확신하지만 XML 문제를 다시로드해야합니다.

Answer 2

설정 방법에 대해 cache ~ true?

$.ajaxSetup({ 
    cache: true 
}); 

Answer 3

한 가지 방법은 (이미지를 가져 오는 함수에서) 별도로 첫 번째 이미지를 얻기 전에 XML 파일을 가져오고 (이 큰 배열 될 것입니다하지만) 어레이의 모든 이미지의 이름을 읽는 것입니다. ,

//pseduo code 
<script type="text/javascript"> 
    var currentImage=-1; 
    var imageName=new Array(); 

    loadXML(){ 
     GETXML; 
     var i=0; 
     for(image in images_in_xml){ 
      imageName.push(image); 
      if(image == CURRENT_IMAGE_NAME) 
       currentImage = i; 
      i++; 
     }    
    } 
</script> 

이제 당신은 현재 이미지의 인덱스가 당신은 쉽게 간단하게 currentImage-1하고 전체 XML마다에 대한 요청을하고있는 것처럼

Answer 4

이 보이는 currentImage+1를 사용하여 다음 및 이전 이미지의 이름을 얻을 수 있습니다 이는 대부분의 경우에 가장 좋은 아이디어는 아닙니다. 귀하의 상황에 따라 최적화 된 데이터베이스, 작은/최적화 된 동적 xml 솔루션을 사용하거나 전문가를 찾기 시작할 수도 있습니다.

간략한 설명에서 jquery 라이트 박스 플러그인을 제안합니다. 물론 그 옵션을 사용하지 않을 이유가있을 수 있습니다.

덧붙여서, 나는 "페이지가로드 될 때 처음으로 상당한 지연이 있습니다"라고 썼고 논리를 이해하려고 노력하고 있습니다 ... 방문자가 사이트를 처음 방문하는 것은 첫인상입니다. 모두가 첫인상이 지속된다는 것을 안다. (특히 온라인, 3 초가 영원과 같다고 느낀다) '