在HTML中为移动设备加载大量文本

Question

我正在开发一个需要以下内容的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之外，还有什么方法可以阻止浏览器呈现库div？ 有没有更好的地方可以保留此内容（例如，一个javascript变量），我仍然可以使用jquery访问其html元素？

Answer 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>浮现在脑海。