jQuery - 动态加载内容，什么是最有效的？

Question

我想知道一件事。我开始编写一个网页，我基本上希望整个网页都采用相同的设计。只有内容在变化的地方。所以我不想加载整个新页面，在这些页面中，基本上相同的内容会一遍又一遍地加载。我只想加载内容。

现在，我看到了两种可能的解决方案。使用某种 jQuery 内容 slider 。整个内容很大，但我选择只显示我想要的部分。当点击链接时，div 中内容的位置会发生变化。

或者我有一个包含大量 div 的单独文件的其他解决方案。点击链接基本上会清空 div 并从其他文件加载所选 div 的内容。

哪种解决方案最好？总体思考和编程明智？我期待这里有很多 php 编程，我也想减少负载量，特别是因为初始网站负载包含一些严重的沉重图像。

Answer 1

如果内容太多，预加载所有内容对于最终用户来说会非常慢。我建议您采用第二种方法，即在单击链接时动态请求内容。

通过劫持所有链接并进行 ajax 调用以获取内容并将其注入(inject)相关容器，您可以轻松简化设计。假设每个链接都从不同的 URL 获取内容，并且根据单击的链接将内容插入到不同的容器中，您只需为每个这样的 AJAX 链接分配几个属性:

在每个可以使用 AJAX 加载内容的链接上定义一个属性 data-remote。

定义另一个属性 data-container 指定要插入结果的容器的 id。

// this is the ajaxy link
<a id="test" data-remote="true" data-container="container-id" href="..">Load</a>

最后，将点击处理程序应用于所有设置了 data-remote 属性的链接:

$('a[data-remote]').click(function() {
    var containerId = this.attr('data-container');
    var url = this.attr('href');
    $('#' + containerId).load(url);

    return false; // stop from navigating to the clicked link
});