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

Question

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

jqueryhtmldynamic

4

我想询问一个问题。我正在编写一个网页，基本上想要相同的设计。只有内容会发生变化。因此，我不想加载整个新页面，而是只想加载内容。

现在，我面临两种可能的解决方案。一种是使用某种jQuery内容滑块，其中整个内容很大，但我选择仅显示所需部分。点击链接时，div内的内容位置会更改。

另一种解决方案是，我有一个单独的文件，其中包含大量的div。当单击链接时，它会清空div并从该其他文件中加载所选div的内容。

哪种解决方案最好？从总体和编程角度考虑？我预计这里需要相当多的php编程，并且还想减少负载量，特别是由于初始网站加载包含一些严重的大型图像。

- Kenny Bones

2个回答

1

请记住，使用部分请求会导致浏览器导航丢失，您的应用程序在可用性方面看起来就像Flash一样，而您用来修复它的任何花哨的东西仍然是一个hack。

您提到内容滑块，如果您想要幻灯片效果本身，将很难摆脱部分请求或预加载的内容。

如果您不需要实际“滑动”内容，请确保页面中所有外部资源都已缓存在浏览器中（所有CSS、所有JavaScript、所有图像都已外部加载），而页面本身只包含（希望尽可能简洁的标签）HTML内容。这样，当所有内容都在缓存中时，您将不会看到任何额外的带宽使用，但是内容本身非常类似于例如ajax请求所得到的内容。

有时，技术的误用仅仅是因为我们没有正确地使用当前（非常简单的）技术，而我们试图提出复杂的解决方案，而一切都在手边。

- Francisco Aquino

请记住，使用部分请求会导致浏览器导航丢失，您的应用程序在可用性方面看起来就像Flash一样，而无论您使用什么花招来修复它，都将是一种hack。哇，这完全不真实和离谱。 #tab1，#tab2用于导航。如果他有20页内容，用户只想要3页，你的节省带宽的解决方案是全部加载吗？如果您不知道如何使用技术，那没关系，但是当有成千上万个示例可以证明某件事情是可以做到的时候，说它不能做到是可怕的建议。 - Nick Craver

我在考虑一个解决方案，就像Facebook一样:p 内容是动态加载的，但是返回/前进按钮仍然有效。可能是因为URL的原因。还应该可以使用URL链接到页面的特定部分。我认为第二种解决方案是最好的。但我最关心的是整个框架。网站的文件结构会是什么样子？比如说我有一个用户控制面板。那会是一个单独的PHP文件吗？ - Kenny Bones

@Nick Craver，为部分请求实现哈希导航是一种hack方法。如果您无法简化标记以匹配完整页面内容的部分请求长度（在这种情况下），那么问题比您尝试应用的时髦技术更深入。 - Francisco Aquino

@F.Aquino 我已经阅读了问题，我认为OP在第一句话中已经表明了他的意图。假设我们知道什么是最好的，而别人不知道，这是不明智的。我并不是试图用问题轰炸你。它们都逻辑上导致了我想要表达的观点——部分请求（和基于哈希的导航）不是一个黑客行为。从最终用户的角度来看，而不是后端代码的纯洁性。Google地图与旧版Mapquest相比。现在，如果像书签这样的东西也可以在那个花哨的Ajaxy界面中工作，那不是很好吗？（处理哈希的副产品） - Anurag

我是原帖作者 :) 我明白这可能是一个困难的话题，尤其是值得辩论的！最好的解决方案显然取决于你真正需要什么。我同意你们两个的观点，仅仅因为你可以做一些花哨的东西并不意味着它就是最好的解决方案。但在这种情况下，我正在做一个网站，用户登录后可以看到自己的内容以及其他人的内容。我正在寻找最聪明的框架来进行编程。我应该使用几个动态的php文件吗？类似这样的东西。我现在想到的是90年代的技术了。对2010年的ajax和服务器端内容不太了解。 - Kenny Bones

显示剩余7条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anurag · Accepted Answer

如果内容过多，预加载会让终端用户感觉非常缓慢。建议采用第二种方法，即在点击链接时动态请求内容。

您可以通过劫持所有链接并发出 ajax 调用来获取内容并将其注入到相关容器中以轻松简化设计。假设每个链接从不同的 URL 获取内容，并且根据单击哪个链接将内容插入到不同的容器中，则只需为每个此类 AJAX 链接分配几个属性：

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

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

// 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
});