Question

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

现在，我提出了两种可能的解决方案。使用某种jQuery内容滑块。整个内容都是huuge，但我选择只显示我想要的部分。点击链接时，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

请记住，使用部分请求会丢失浏览器导航功能，您的应用程序在可用性方面看起来就像闪存一样，并且您使用它来解决这个问题仍然是一个黑客攻击。

您提到内容滑块，如果您想要幻灯片效果本身，那么远离部分请求或预加载内容将会很复杂。

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

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

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

2 个答案: