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

Question

我想知道这件事。 我开始编写一个网页，我基本上想要完全一样的设计。 只有内容在变化。所以我不想加载整个新页面，基本上相同的东西被一遍又一遍地加载。我只想加载内容。

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

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

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

Answer 1

如果内容过多，对最终用户而言，预加载所有内容将非常缓慢。我建议您使用第二种方法，即在单击链接时动态请求内容。

您可以通过劫持所有链接并进行 ajax 调用来获取内容并将其注入相关容器中，从而轻松简化设计。假设每个链接都从不同的 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
});

Answer 2

请记住，使用部分请求您将失去浏览器导航，您的应用在可用性方面看起来就像 flash 一样，而您使用的噱头来修复它仍然是一个 hack。

您提到了内容滑块，如果您想要幻灯片效果本身，那么从部分请求或预加载的内容中移开会很复杂。

如果您不需要实际“滑动”内容，请让您的页面在浏览器中缓存所有外部资源（所有 CSS、所有 JavaScript、所有图像都从外部加载）并且您的页面本身只有（希望在标签方面尽可能简约）html内容。这样一来，对于缓存中的所有内容，您不会看到任何额外的带宽被使用，而是内容本身，这与您使用 ajax 请求所获得的非常相似。

有时滥用技术的唯一原因是我们没有正确使用当前（并且非常简单）的技术，并且我们试图在一切都在手边时想出复杂的解决方案。