Question

＆LT; a id =“aboutTab”href =“javascript：void（0）;”的onclick = “约（）;” ＆gt;关于＆LT; / a＆gt;

当我们点击关于链接..在div中加载about.html时，这是函数

function（about）{$（'＃idx'）。load（'about.html'）; }

我希望它应该缓存或其他什么，所以当我下次关于我们时，它不应该再次加载该页面。

目前，每次点击该链接时都会调用about.html。我可以只加载一次，如果已经点击了该链接，它应该获得缓存，以便下次不再加载。

About.html是一个非常繁重的页面，因为它从xml读取数据。所以，我想只加载一次，如果用户再次点击该链接就使用缓存。

请建议。

Answer 1

查看pjax：http://pjax.heroku.com/。一旦PJAX加载到您的页面上，您就可以执行此类操作（来自readme）：

<div id="main"><!--content will be loaded here--></div>
<a href='/explore' data-pjax='#main'>Explore</a>

$('a[data-pjax]').pjax()

Answer 2

使用.one

$("#AboutUs").one("click", function() {
   $(this).load('about.html');
})

更新

替代方法（点击具有ID的链接将从about.html加载html）

$("a#linkID").click(function (e) { 
      $("#AboutUs").load('about.html');
      $(this).unbind(e.eventType);
});

请注意：

请参阅 .load

的其他说明

由于浏览器安全限制，大多数“Ajax”请求都是主题同源政策;请求无法成功检索来自不同域，子域或协议的数据。

Answer 3

(function() {

    var cache = {},
        aboutUsEl = $('#AboutUs');

    var aboutUs = function () {
        if (cache['aboutus']) {
            aboutUsEl.html(cache['aboutus']);
        } else {
            $.get('about.html')
                .done(function(response) {
                    cache['aboutus'] = response;
                    aboutUsEl.html(response);
                });
        }

    };

    aboutUsEl.click(aboutUs);

})();

Jquery OnClick事件 - 我可以缓存页面，使其不会一次又一次地加载

3 个答案:

更新