在移动设备的 html 中加载大量文本答案

【问题标题】：Load large amounts of text in html for mobile在移动设备的 html 中加载大量文本
【发布时间】：2013-08-17 06:16:24
【问题描述】：

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

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

我已经能够通过将所有 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 元素？

【问题讨论】：

标签： html jquery dom web-applications rendering

【解决方案1】：

您可以在 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> 会浮现在脑海中。

【讨论】：

这正是我想要的。现在快多了。谢谢！