Question

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

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

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

Answer 1

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

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

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/

减少HTTP请求

2 个答案: