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

我想知道这件事情。我开始编写一个网页，我基本上都想要相同的设计。只有内容在改变。所以我不想加载整个新页面，基本上相同的东西一遍又一遍地加载。我只想加载内容。jQuery - 动态加载内容，什么是最有效的？

现在，我提出了两种可能的解决方案。使用某种类型的jQuery内容滑块。如果整个内容都很难理解，但我选择只显示我想要的部分。当点击链接时，div内容的位置发生变化。

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

什么解决方案是最好的？总体思路和编程思路？我期望在这里有相当多的PHP编程，我也想减少负载量，尤其是因为最初的网站负载包含一些严重的图像。

来源

2010-03-09 Kenny Bones

如果内容太多，预加载它对最终用户来说确实很慢。我建议你在点击链接时采用动态请求内容的第二种方法。

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

定义属性data-remote，每个链接都可以通过AJAX加载内容。

定义另一个属性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 
});

来源

2010-03-09 12:36:43 Anurag

这真是个好建议。因为我们需要一个基于URL的系统。这也应该规定如何加载内容。整个框架实际上需要基于这个解决方案。再一次，很像Facebook :)其中btw是令人惊叹的编码！ – 2010-03-09 13:33:34

Facebook拥有一些惊人的工程师。如果您制作的是单页富互联网应用程序，您可能还需要查看Google在Google Web Toolkit（GWT）中使用的一些实践。 Wave是用GWT编写的。 – Anurag 2010-03-09 14:51:09

请记住，使用部分请求会导致浏览器导航失效，您的应用程序在可用性方面看起来就像flash一样，并且您使用的噱头修复了这仍然是黑客行为。

您提到了内容滑块，如果您希望幻灯片效果本身，则会偏离部分请求或预加载的内容，这会变得非常复杂。

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

有时候滥用技术的唯一原因是我们没有正确使用当前的（也是非常简单的）技术，并且我们试图在一切即将到来时提出复杂的解决方案。

来源

2010-03-09 12:20:43

“请记住，使用部分请求你将失去浏览器导航，应用程序看起来就像闪光就可用性而言，你用它来修复这个问题仍然是一种破坏。“......哇，这完全是不真实的，并且是不合时宜的。想到导航的＃tab1，＃tab2。如果他有20页的内容，并且用户想要3您的解决方案**节省带宽**是加载全部？如果你不知道如何使用这些技术，那完全没问题，但是说出一些不可能完成的事情，并且有成千上万的例子是可怕的建议。 – 2010-03-09 12:37:36

也许他的意思是浏览器的后退/前进按钮不起作用。 – Pointy 2010-03-09 12:43:40

@Pointy - 他们会如果你使用哈希导航，只是'Tab1'，'Tab2'，回去/转发。 – 2010-03-09 12:50:04

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

回答

相关问题