Question

我正在开发一个需要以下内容的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元素？

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>。{/ p>

在html for mobile中加载大量文本

1 个答案: