Question

我正在构建一个图像库但有大量图像的应用程序（用于浏览文档档案）;基本上应用程序执行此操作：

显示图片
在第一张图片的左右两侧显示“previous”和“next”链接

从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);
  });

第一次加载页面时，脚本为：

从url参数'img'
加载包含所有图像名称的xml文件
从同一个文件中获取上一个和下一个图像名称
显示图片
显示指向上一张和下一张图片的链接

到目前为止一切顺利。我的问题在于其他图像。

上一张或下一张图片的链接是：

 display('image_id');

我希望在不重新加载页面并再次调用'display'函数的情况下，我不必再次获取XML文件，也不必再次解析它。但是，情况似乎并非如此：显然，每次调用“display”函数时，XML文件都会再次加载。

第一次加载页面时出现明显延迟是可以接受的;但每张图片的延迟时间似乎都很缓慢且非常不愉快。

我完全控制了应用程序;如果有一个比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和currentImage+1

即可轻松获取下一张和上一张图片的名称

Answer 4

看起来你每次都要求完整的xml，这在很多情况下并不是最好的主意。根据您的具体情况，您可能希望使用优化的数据库，更小/优化的动态xml解决方案或开始寻找专家......

根据您提供的简要说明，我建议使用jquery灯箱插件 - 但当然您可能有理由不使用该选项。

顺便说一句，我注意到你写了“第一次加载页面时出现重大延迟是可以接受的”并且我正在尝试理解逻辑......第一次访问者访问您的网站是第一次印象，并且每个人都知道第一印象最后（特别是在线，3秒感觉像永恒）'

如何缓存jquery Ajax请求和解析

4 个答案: