棘手的延迟加载问题答案

【问题标题】：Tricky Lazy Loading Question棘手的延迟加载问题
【发布时间】：2010-12-27 14:52:44
【问题描述】：

问候溢出者，

结果集网格将从 HTML 页面查看快照。
快照需要保留原始页面布局，包括任何表格、图像...
用户将滚动浏览快照以完整阅读快照页面
Snaps 可以在 HTML 页面的任何位置查看不同大小的窗口

问题： 是否可以实现延迟加载，以便仅加载查看的窗口而不会丢失捕捉的 HTML 页面的交互性（例如超链接）？如果 HTML 页面不能以这种方式动态定制和延迟加载，则欢迎使用任何交互式文档格式（例如 PDF、Flash）。

更新：很抱歉给您带来了困惑。快照不是图像，它们是 HTML 页面中任意位置的随机视口。在图像中很简单，我们可以只加载我们需要查看的部分。在 HTML 中，这很困难，除非该部分实际上是整个可见的 HTML 标记元素并且它适合所需的部分。 iframe 只会方便窗口查看快照，但我不想加载整个 HTML 页面，因为它们很大，但只有所需的快照。问题快照可能位于页面布局分区中间的某个位置，每个分区都非常大。因此，仅在以后修复布局大小和延迟加载其内容将无济于事。我认为布局转换是必要的，但非常困难。我希望我可以拍下完整的 HTML 页面的照片，并拍摄我需要查看的任何部分，并且此图像部分保持互动:)

谢谢！

【问题讨论】：

您的意思是，您想要创建保留其功能的网站快照？虽然并非不可能，但这听起来像是谷歌 50 多人的专家团队的任务。还是你的意思是别的？
您能解释一下您所要求的超出 IFRAME 的功能吗？
@Reinderien：是的，谢谢。这不是加载选择性布局元素，而是加载这些元素的选择性内容，因为它们只是部分可见。
@Reindeerien @Geeko - 如果不加载整个 DOM，您无法说出页面上的内容，因为后面的元素可能会改变整个布局（例如表格列宽等）。 Javascript 将使事情变得更加复杂，因为您需要让它在许多现代网页上运行。

标签： html lazy-loading

【解决方案1】：

您可以使用带有 XMLHttpRequest (XHR) 的 JavaScript 来异步获取内容并将该文本放置在页面上（即延迟加载内容）。我不熟悉您使用的某些术语（例如，什么是“快照”），但是如果您的布局指定了大小（而不是依赖于内容，例如，设置表格列的大小），那么这种延迟加载可以在不重新渲染布局的情况下完成。

【讨论】：

【解决方案2】：

正如我所解释的 - 你有一些带有滚动条的固定大小的“视口”div。您有监控视口滚动事件的 Javascript。您必须（不知何故）大致了解哪些内容元素在内页上的位置。如果某个部分滚动到尚未加载的视图中，则使用 AJAX 发送它。我认为这项工作中最棘手的部分是在不完全加载内容页面的情况下确定内容元素的大致位置，但也许您已经对内容做出了一些假设。

编辑：

我不想加载整个 HTML 页面，因为它们很大

这似乎表明您实际上确实对您正在使用的页面有一些假设。页面如何“大”？他们有大量的表格、大量的图像、大量的图像、flash 内容、javascript 内容……吗？加载所有不属于特定标记类型的 DOM，然后选择性地加载其余部分，您可能会获得更好的成功。

【讨论】：

我无法事先预测 HTML 页面的结构。您将如何处理尺寸比视口大得多的元素？我不想加载 HTML 中不可能的所有内容！
可以加载该元素，但只能选择性地加载可见的子元素（而不是当前隐藏的子元素）。
这是假设它有孩子，但如果没有并且它充满了文本（这可能是我的应用程序中的情况），那么我将需要加载整个文本，这是非常大的。我希望有办法！
感谢大家的贡献。是的，“他们有大量的表格、大量的图像、大量的图像、flash 内容、javascript 内容……”但并非总是如此。假设现在正在查看文本 HTML 元素，您是否建议加载 this 元素，即使它有非常大的文本（>1M）？
很少有单个元素包含超过 1MB 的文本；文本通常被分解为 div。即使它是 1MB 的文本，也不会花费太长时间来呈现，除非您正在为某种嵌入式系统进行设计。我开始在这里闻到过早的优化。您是否在没有所有这些复杂的选择性渲染的情况下实现了系统，并观察到它的速度慢得无法使用？