Как кэшировать 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. загружает XML-файл, содержащий имена всех изображений
3. получает предыдущее и следующее имена изображений из этого же файла
4. отображает изображение
5. отображает ссылки на предыдущее и следующее изображения

Пока все хорошо. Моя проблема с другими изображениями.

Ссылка на предыдущее или следующее изображение:

 display('image_id');

Я надеялся, что без перезагрузки страницы и простого повторного вызова функции «display» мне не нужно будет снова получать 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

Похоже, вы каждый раз запрашиваете полный xml, что во многих случаях не лучшая идея. В зависимости от вашей ситуации вы можете использовать оптимизированную базу данных, уменьшенное / оптимизированное динамическое XML-решение или начать искать эксперта ...

Из краткого описания, которое вы даете, я бы предложил плагин jquery lightbox - но, конечно, у вас может быть причина не использовать эту опцию.

Кстати, я заметил, что вы написали: «Значительная задержка при первой загрузке страницы является приемлемой», и я пытаюсь понять логику ... Первое посещение вашего сайта посетителем - первое впечатление, и все знают, что первые впечатления длятся последними (особенно в сети, где 3 секунды кажутся вечностью) '

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 и currentImage+1

Answer 4

Как насчет установки cache в true?

$.ajaxSetup({
  cache: true
});