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

Question

我们有一个Web应用程序，它是标签结构。 用户首次单击选项卡时，它将通过.load（）加载内容。 这很棒，并且运作良好且相对较快，但是我们希望缓存负载，因此在将来，如果用户单击与以前相同的选项卡，则不会加载内容，而只是.show（）与以前相同的内容。

例如：

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

我如何存储用户已将内容加载到其中并在下次单击时显示内容。 我需要使其尽可能保持模块化和通用性，因此不仅要保持link1，link2等的作用……

有任何想法吗？

Answer 1

嗯...

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

userId LinkId内容

每个负载，您都应该将值放在其中

下次您需要加载某些内容时，请先在dictionary / 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();
}

我要说的是，这是最常见的方法，也是最简单的方法。