Question

我们有一个网络应用，它是标签结构。当用户第一次单击选项卡时，它会通过.load（）加载内容。这很好，运行良好且相对较快，但是我们希望缓存负载，以便将来，如果用户点击与之前相同的选项卡，它不会加载内容，它只是.show（）与以前相同的内容

例如：

$('#link1').click(function(){ 
    $('#holder1').load('/pages/link1');
}

如何存储用户已加载内容并仅在下次点击时显示内容。我需要尽可能保持模块化和通用性，所以不仅仅是link1，link2等......

有什么想法吗？

Answer 1

... MMMM

你应该在JS上创建一个数组q字典，如下所示：

userId LinkId内容

每次加载你应该把值放在那里

下次需要加载时 - 先在字典/ qarray上查看。

Answer 2

如果加载了数据，你可以保留一个标志，然后再次检查标志以避免重新加载，我在这里使用自定义属性（data-）。

$('#link1').click(function(){ 
 if($('#holder1').attr('data-loaded')!='yes')
 {
    //data is not loaded then load
    $('#holder1').load('/pages/link1');
    $('#holder1').attr('data-loaded','yes')
 }else
 {
    //data is already loaded then just show or do something else
 }
}

Answer 3

只是抛弃另一个想法，如果你的动态信息被加载到DOM或在页面上填充一些HTML，你可以在进行AJAX调用之前测试是否存在该HTML。！考虑选项卡的情况，点击“＃tab2-link”填充“＃tab2”并激活它：

$('#tab2-link').click(function() {
    tabLoader(this.id.split('-link')[0]);
});

function tabLoader(tabId) {
    var $tabId = $(tabId);
    if($tabId.html() === '') {
        $tabId.html('<img src="spinner.gif" />'); //Add/show a spinner
        $tabId.load(...); //Remove/replace your spinner on AJAX success.
    }
    $tabId.show();
}

我想说的是这类事情最常见的方法，也是迄今为止最简单的方法。

jQuery加载/动态内容最佳实践

3 个答案: