javascript - 外部 Ajax : All at Once, 根据需要，还是其他？

Question

我创建了一个 Magic The Gathering 网站供我和我的 friend 使用。在此网站上，我们上传一副纸牌，在您可以查看这副纸牌中所有纸牌的页面上，每张纸牌都有一个指向 http://gatherer.wizards.com/ 上的纸牌的链接>。不过，为了便于使用，我这样做是为了当您将鼠标悬停在任何卡片名称上时，卡片图像会从 Gatherer 中通过 Ajax 获取，从而让您无需单击链接即可看到卡片。

问题是:我应该在页面加载时一次性加载所有大约 40 张左右的卡片图像，还是应该在图像悬停时连续加载图像，或者是否应该采取其他方法是吗？

就目前情况而言，我会在每张卡片悬停时加载它。我担心的是，当人们在列表中上下移动鼠标时，会向 Gatherer 发出大量请求。它可能会节省一开始就加载它们的请求，但我不确定每次有人在我的网站上加载其中一个套牌时，Gatherer 是否会因为突然出现的一系列请求而对我感到不安。

我想到的一个解决方案是在卡片悬停时加载卡片，但将图像保存在隐藏的容器中，当鼠标再次悬停在其上时重新加载它。因此，如果他们加载页面并且不查看任何内容，则不会发送不必要的请求，但如果他们在页面上停留 30 分钟并一遍又一遍地查看每张卡片，我们就不会用请求淹没 Gatherer。

我只是不知道我使用的方法是否浪费 - 从我或收集者的带宽 Angular 来看，或者从我不熟悉的任何其他 Angular 来看。例如，我应该了解外部 Ajax 的黄金规则吗？

我当前使用的方法，我认为这可能是最糟糕的实现，但它是一个概念证明:

$(document).ready(function(){
  var container = $('#cardImageHolder');
  $('.bumpin a').mouseenter(function(){
    doAjax($(this).attr('href'));
    return false;
  });

  function doAjax(url){
    // if it is an external URI
    if(url.match('^http')){
      // call YQL
      $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                "q=select%20*%20from%20html%20where%20url%3D%22"+
                encodeURIComponent(url)+
                "%22&format=xml'&callback=?",
        // this function gets the data from the successful 
        // JSON-P call
        function(data){
          // if there is data, filter it and render it out
          if(data.results[0]){
            var data = filterData(data.results[0]);
            var src = $(data).find('.leftCol img').first().attr('src');
            var fixedImageSrc = src.replace("../../", "http://gatherer.wizards.com/");
            var image = $(data).find('.leftCol img').first().attr('src', fixedImageSrc);
            container.html(image);
          // otherwise tell the world that something went wrong
          } else {
            var errormsg = "<p>Error: can't load the page.</p>";
            container.html(errormsg);
          }
        }
      );
    // if it is not an external URI, use Ajax load()
    } else {
      $('#target').load(url);
    }
  }
  // filter out some nasties
  function filterData(data){
    data = data.replace(/<?\/body[^>]*>/g,'');
    data = data.replace(/[\r|\n]+/g,'');
    data = data.replace(/<--[\S\s]*?-->/g,'');
    data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
    data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
    data = data.replace(/<script.*\/>/,'');
    return data;
  }
});

Answer 1

不，Ajax 没有黄金法则。预先加载 40 个图像可以最大限度地减少悬停时的加载时间，但会大大增加页面首次加载时使用的带宽量。

您总会遇到这些类型的平衡问题。由您来决定什么是最好的，并根据经验数据进行调整。

"A solution I thought of was to load cards as they are hovered over, but save the image in a hidden container and just reload it when they mouse over it AGAIN. Thus if they load the page and don't look at anything, no needless requests were sent, but if they stay on the page for 30 minutes looking at every card over and over again, we don't inundate Gatherer with requests."

这听起来很合理。

如果我是你，我会在用户第一次加载页面时加载每张图片。让浏览器缓存图片，你不用担心。另外，这可能是最简单的方法。不必要时不要让事情变得过于复杂:)