使用存储在javascript数组对象中的数据延迟加载html页面

我正在设计html页面，其中包含10000多行带有特定id的段落标记。随着行数的增加，页面加载时间超过3分钟。所以我想从javascript数组对象中延迟加载这些数据，该对象应该在scroll上加载更多数据，并且还能够直接加载到从不同页面标记的id

由于项目离线工作，我不想使用php和MySql，所以我想使用javascript加载数据

html代码

<p id="a1">श्रीगुरुभ्यो नमः ॥</p>
<p id="a2">समस्तगुणसम्पूर्णं सर्वदोषविवजितम् ।</p>
<p id="a3">नारायणं नमस्कृत्य गीतातात्पर्यमुच्यते ॥१॥</p>
<p id="a4">शास्त्रेषु भारतं सारं तत्र नामसहस्रकम् । वैष्णवं कृष्णगीता च तज्ज्ञानान्मुच्यतेञ्जसा ॥ 
</p>
<p id="a5">न भारतसमं शास्त्रं कुत एवानयोः समम् । भारतं सर्ववेदाश्च तुलामारोपिताः पुरा ॥ 
</p>
<p id="a6">देवैर्ब्रह्मादिभिः सर्वैर्‍ऋषिभिश्च समन्वितैः । व्यासस्यैवाज्ञया तत्र त्वत्यरिच्यत भारतम् ॥ 
</p>
<p id="a7">महत्त्वाद्भारवत्त्वाच्च महाभारतमुच्यते । निरुक्तमस्य यो वेद सर्वपापैः प्रमुच्यते ॥</p>

---

我希望javascript数组对象加载到id为的html段落中，并在scroll上加载更多内容。我还想更快地加载页面。

基本思想可能是加载对象以获取特定数量的数据，例如从id 0到id 100。然后在代码中处理onscroll事件，并在用户请求时加载其余数据

互联网上有很多不错的开源软件包和库。查看并查看这个简单的无限滚动实现：

这样做的目的是在el.scrollTop滚动位置达到end-el.scrollHeight时加载更多数据。我们使用scroll事件的eventListener截获此消息

对你来说，你必须改变

var item = document.createElement('li');

到

取决于每次追加的数据量 您可能希望将它们附加到片段文档中。createDocumentFragment然后，当我们退出循环时，您可以将片段附加到您的列表中

使用超列表库的虚拟列表示例： 使用虚拟列表可以极大地提高性能 添加动态项目高度 添加了使用位置哈希滚动到初始位置 这个库为我们处理滚动逻辑。这是一个虚拟列表实现，它将在列表中显示大约15个元素，并在滚动时更新/替换它们

您可以从npm安装库或将以下脚本附加到正文中：

   <script src="https://cdn.jsdelivr.net/npm/hyperlist@1.0.0-beta/dist/hyperlist.min.js"></script>

无限列表{ 高度：180像素； 宽度：100%； 边框：1px纯黑； } 屏幕外{ 位置：固定！重要； 左：-9999px！重要； 宽度：100%； } /*下面是可选的眼罩：*/ 文章{ 文本转换：大写； 填充：10px； 边框底部：1px实心黄绿色； } 文章：悬停{ 背景：ccc； }

---

还可以直接加载到不同页面的id标签。你这是什么意思？你能编辑你问题的这一部分来更好地解释它吗谢谢你的帮助，这很好地工作了，但是如果我从另一个页面点击一个按钮，链接到一个尚未滚动的段落id，它就不会转到那一行。如果已经滚动，则该行正在打开。你能帮我解决这个问题吗？好的，我想我明白你需要什么：当页面从另一个窗口/选项卡打开时，从一个带有锚定标记的链接加载内容，至少到那时为止。我们可以增强当前的解决方案来实现这一点，但是如果所需的p是最后一个p之一，那么它几乎与加载整个页面相同。有一些解决方案可以动态更改内容，以便不加载滚动窗口之外的内容。您可能需要一个js库来处理这个问题。你在使用什么技术/框架？我已经更新了代码片段，并添加了一个简单的解决方案，可以将更多内容加载到目标id，并在那里滚动页面-你不想用window.location.hash替换g查看代码中的注释我正在使用jqueryI添加了一个虚拟列表实现的更新，它应该适用于你

var item = document.createElement('p');
var data = dataArray[i];

item.id = data.url.replace('#', ''); // You'll want to remove the '#'
item.innerText = data.text;
listElm.appendChild(item);

   <script src="https://cdn.jsdelivr.net/npm/hyperlist@1.0.0-beta/dist/hyperlist.min.js"></script>