Question

我为我和朋友们创建了一个Magic The Gathering网站，供我使用。在这个网站上，我们上传了我们的卡片组，在您可以查看卡片中所有卡片的页面上，每张卡片都是http://gatherer.wizards.com/上卡片的链接。但是为了便于使用，我将其设置为当您将鼠标悬停在任何卡片名称上时，卡片图像会从收集器中获取Ajax，从而让您无需单击链接即可查看该卡片。

问题是：我应该在页面加载时一次性加载所有~40张左右的卡片图像，还是应该在图像悬停时连续加载图像，或者是否有其他方式我应该这样做它？

就目前而言，我将每张卡片悬停在上面。我担心的是，随着人们在列表中上下移动，这对收集者来说是很多请求。它可能会保存一开始就加载它们的请求，但我不确定Gatherer是否会因为每次有人加载我网站上的一个套牌而突然发出请求而感到不满。

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

我只是不知道我使用的方法是否浪费 - 从带宽的角度来看我或收集者，或者我不熟悉的任何其他观点。例如，我应该知道外部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张图像可以最大限度地减少悬停时的加载时间，但会大大增加首次加载页面时使用的带宽。

您将始终拥有这些类型的平衡问题。它由你决定什么是最好的，并根据经验数据进行调整。

＆＃34;我想到的一个解决方案是在卡片悬停时加载卡片，但将图像保存在隐藏的容器中，只需重新加载即可鼠标悬停在它上面。因此，如果他们加载页面而不看没有任何不必要的请求被发送，但如果他们留在页面上 30分钟一遍又一遍地看着每张卡片，我们都没有通过请求淹没收集者。＆＃34;

这听起来很合理。

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

外部Ajax：一次性，需要还是其他什么？

1 个答案: