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

Question

我们有一个网页应用程序，它是标签结构的。当用户第一次单击选项卡时，它会通过 .load() 加载内容。这很好，效果很好，速度相对较快，但是我们想缓存加载，所以将来，如果用户单击与以前相同的选项卡，它不会加载内容，它只是 .show() 与以前相同的内容.

例如：

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

如何存储用户已加载内容并在下次点击时显示内容。我需要让它尽可能模块化和通用，所以不仅仅是链接1、链接2等......

有什么想法吗？

Answer 1

嗯嗯....

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

userId LinkId 内容

每个负载你应该把值放在那里

下次你需要加载一些东西时——首先在字典/qarray上检查它。

Answer 2

再想一想，如果您的动态信息被加载到 DOM 中或在页面上填充一些 HTML，您可以简单地测试以查看该 HTML 是否存在，然后再进行 AJAX 调用以填充它！考虑选项卡的情况，单击“#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();
}

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

Answer 3

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

$('#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
 }
}