我有一个应用程序，它采用可滚动的jQuery轮播类型显示。此显示包含属于用户的照片...每张照片都有相当数量的兄弟html内容（与您悬停在其上时显示的照片相关的数据等） - 所以这个标记，加上图像标记都是嵌套在带有css类＆＃34; photo＆＃34; ..
的容器元素中为了使事情更复杂，每张照片都是可拖动的，并附加了其他几个行为/事件监听器。
当我最初设计这个时，我感到担心这个旋转木马装载了太多的数据（比如想象一个拥有10000张照片的用户）。我很快就想象着dom被过多的元素所覆盖，而且一切都在拖拉，然后旋转死亡的颜色球，然后崩溃。
我的解决方案是通过分页来限制轮播的负载，并且仅获取给定页面的资产...这意味着对于给定用户浏览他们的照片会有相当多的xhr请求。 ......那也关心我。
所以我想知道社区说什么...什么更好？一个超载的dom？或许多xhr请求？或者答案可能更多是两者之间的平衡？
评论
答案 0 :(得分：2)
使用ajax，一次只加载x，直到用户进一步滚动轮播，然后再加载x。
答案 1 :(得分：1)
许多XHR请求都是可行的方法。 IE尤其不喜欢混乱的DOM。它处理静态显示很好，但是如果你尝试使用jQuery动画，你会得到非常不稳定的结果。
我会使用类似http://api.jquery.com/jQuery.template/的内容定义一些客户端模板，并为您的图片传回JSON元数据。这样您的网络流量就很小了。因此，像5-10一样加载启动，然后一次缓冲10。当你达到100左右时，删除旋转木马的开始。然后，您可以根据它在IE中的表现来玩这些“魔术数字”＆lt; 9（其他浏览器应该没问题。）
答案 2 :(得分：0)
就个人而言，每当我处理这样的事情时，我会看看我正在开发的浏览器。
如果它是针对客户的，或者是您向特定人群销售的东西，并且您可以“控制”您正式支持的环境，找出它是什么，并为浏览器做出最佳决策。例如，Internet Explorer（IE9之前的版本）因许多AJAX请求而陷入困境，您可能会因为在填充DOM元素的同时屏蔽页面顶部的某种加载栏而受益。
但是，据我所知，Firefox并没有任何形式的AJAX限制，所以我总是在那里进行分页/多个AJAX调用。作为我自己的经验法则，我想尝试让AJAX首先工作。如果可以的话，这通常是目前最有效/最简单的方法。如果它有效，它总是更好。
答案 3 :(得分：0)
我会倾向于两者之间的平衡。也许在页面加载时，加载你的初始照片集并在显示初始集后在后台预加载下一组照片（JS或CSS方法，我不确定哪个更有效）在分页时，预先加载的集合会在您发出AJAX请求以检索和构建下一组照片时进入视图。
这样，每次用户分页时，他们都不必等待服务器响应AJAX请求，但你也不会在DOM中得到10000张照片。