javascript - 减少 HTTP 请求

Question

我正在使用此代码动态加载外部页面

$(function() {
   $('#nav a').click(function() {
    var page = $(this).attr('href');
    $('#content').load(page + '.php');
    return false;
    });
});

我注意到，每次单击其中一个菜单选项卡时，都会发送一个新的 HTTP 请求并再次加载该页面。我想知道如何让每个页面加载一次，所以当我浏览标签时，已经加载的页面显示而不发送新的请求？

Answer 1

您可以使用.data() “标记”已经加载了标记的选项卡，并且仅在标记不存在时发出 HTTP 请求。

编辑：关于氪石的评论，这将是解决问题的一种简单方法：

var pages = {};

$(function() {
  $('#nav a').click(function() {
    var page = $(this).attr('href');

    if (!(page in pages)) {
      $.get(page, function (data) {
        pages[page] = data;
      });
    }

    $('#content').html(pages[page]);

    return false;
  });
});

Answer 2

$('#nav a').click(function(e) {
    e.preventDefault();
    $this = $(this);
    if ($this.data('loaded') !== true) {
        // Load it.
        $this.data('loaded', true);
    } else {
        alert('Already loaded that one!');
    }
});

这将满足您的需求。您需要将加载代码放在我有// Load it.评论的地方，并且可能还想删除该else块。 http://jsfiddle.net/rRumK/