0

我正在开发一个需要以下内容的 webapp：

  1. 基于复杂函数在html中（使用$.ajax）动态加载大量文本（大约30-100个打印页面）的页面
  2. 预先加载所有这些文本。它不能一次加载一点。
  3. 一次只显示少量文本。

我已经能够通过将所有 html 加载到我一直隐藏的 div 元素（库）中来做到这一点。我使用 jquery 在可见的 div（内容）中一次显示一点。

<div id="content">
    <ul index="1">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
    ...
    <ul index="4">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>
<div id="library" style="display:none">
    <ul index="1">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
    ...
    <ul index="450">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

我的问题是，将此文本保留在此 div 中会减慢网页初始加载和操作（它有动画等）。我已经能够确定 html 的加载速度相当快，但是会花费大量时间进行处理（渲染？）。

我怎样才能让这个简单的文本库不占用这么多内存。除了隐藏它之外，有什么方法可以阻止浏览器呈现库 div？有没有更好的地方来保存这个内容（例如一个 javascript 变量），我仍然可以使用 jquery 访问它的 html 元素？

4

1 回答 1

0

您可以在 JavaScript 变量中输出隐藏的内容，而不是在文档中以 HTML 格式输出，而不是这样：

<ul index="450"> ...lots of HTML... </ul>

你有这个：

<script>pages[450] = "...lots of HTML...";</script>

然后要使页面可见，您说：

$('#content').html(pages[N]);

这样，将每个页面的 HTML 解析为 DOM 的成本只会在您实际显示该页面时产生，而不是在加载时产生。

请小心转义您存储在 JavaScript 字符串中的 HTML - 引号、反斜杠、换行符和</script>浮现在脑海中。

于 2013-08-17T06:24:02.417 回答