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

Question

我正在设计 html 页面，该页面在具有特定 id 的段落标记内超过 10,000 行。由于行数较多，页面加载时间超过3分钟。因此，我想从 javascript 数组对象延迟加载此数据，该对象应该在滚动时加载更多数据，并且还能够直接加载到从不同页面标记的 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数组代码

var b = [{"title":"गीतातात्पर्यनिर्णयः","text":"श्रीगुरुभ्यो नमः ॥","url":"#a1"},
{"title":"गीतातात्पर्यनिर्णयः","text":"समस्तगुणसम्पूर्णं सर्वदोषविवजितम् ।","url":"#a2"},
{"title":"गीतातात्पर्यनिर्णयः","text":"नारायणं नमस्कृत्य गीतातात्पर्यमुच्यते ॥ 
१॥","url":"#a3"},
{"title":"गीतातात्पर्यनिर्णयः","text":"शास्त्रेषु भारतं सारं तत्र नामसहस्रकम् । वैष्णवं 
कृष्णगीता च तज्ज्ञानान्मुच्यतेञ्जसा ॥","url":"#a4"},
{"title":"गीतातात्पर्यनिर्णयः","text":"न भारतसमं शास्त्रं कुत एवानयोः समम् । भारतं 
सर्ववेदाश्च तुलामारोपिताः पुरा ॥","url":"#a5"},
{"title":"गीतातात्पर्यनिर्णयः","text":"देवैर्ब्रह्मादिभिः सर्वैर्‍ऋषिभिश्च समन्वितैः । व्यासस्यैवाज्ञया 
तत्र त्वत्यरिच्यत भारतम् ॥","url":"#a6"},
{"title":"गीतातात्पर्यनिर्णयः","text":"महत्त्वाद्भारवत्त्वाच्च महाभारतमुच्यते । निरुक्तमस्य यो 
वेद सर्वपापैः प्रमुच्यते ॥","url":"#a7"}]

我希望将 javascript 数组对象加载到带有 id 的 html 段落中，并在滚动时加载更多内容。我也想更快地加载页面。

Answer 1

看看这个简单的无限滚动实现:https://codepen.io/wernight/pen/YyvNoW

这个想法是在el.scrollTop(滚动位置)到达末尾 - el.scrollHeight 时加载更多数据。我们使用 scroll 事件的 eventListener 来拦截此事件

根据你的情况，你必须改变

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

至

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);

取决于您一次附加多少数据您可能希望将它们附加到片段 (document.createDocumentFragment)，然后当我们脱离循环时，您可以将片段附加到您的listElm

使用hyperlist库的虚拟列表示例:

• 使用虚拟列表可以大大提高性能
• 添加了动态项目高度
• 添加了滚动到初始位置(使用位置哈希)

这个库为我们处理滚动逻辑。这是一个虚拟列表实现，它将显示列表中的最少元素(大约 15 个)并在我们滚动时更新/替换它们

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

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

重要由于列表中的每个项目可能具有不同的高度，因此我们需要一种方法在项目实际呈现在容器中之前计算它。这就是为什么我们有另一个元素位于屏幕之外并用于计算

另一个重要点是滚动到初始位置。该库不公开滚动到所需索引的方法。我添加了逻辑来逐渐滚动，直到所需的元素出现在 View 中(Scroller 类)。这是通过首先检查 dataArray 是否可以找到此类元素，然后访问私有(private)属性 _itemPositions 来完成的，该属性在列表滚动时动态更新

var dataArray = createDataArray();

var section = document.getElementById('infinite-list');
var offScreen = document.getElementById('offscreen');
var container = document.createElement('div');
var scroller = document.createElement('div');

var list = HyperList.create(container, {

  scroller: scroller,
  // All items must be the exact same height currently. Although since there is
  // a generate method, in the future this should be configurable.
  itemHeight: 100,
  // Specify the total amount of items to render the virtual height.
  total: dataArray.length,

  // Wire up the data to the index. The index is then mapped to a Y position
  // in the container.
  generate(index) {
    var el = createArticle(index);
    
    // Set height dynamically 
    var height = calcHeight(el);
    
    
    return { element: el, height: height};
  },
  
});

function createArticle(index) {
 
  var data = dataArray[index];
  var item = document.createElement('article');
  var title = document.createElement('h3');
  var content = document.createElement('p');
   
  title.innerText = data.url;
  content.innerText = data.text;
  
  item.id = data.url.replace('#', '');
  item.appendChild(title);
  item.appendChild(content);
    
  return item;
}

function calcHeight(el) {
  
  // apend outside of screen to calculate height
  offScreen.appendChild(el);
                        // compensate for paddings or margins
  var height = offScreen.offsetHeight + 40;
  offScreen.removeChild(el);
  
  return height;
}

window.addEventListener('load', function() {
  var id = '#545'; // harcoded for snippet
    // use the below for actual functionality
    // var id = window.location.hash;
  scrollToId(id);
  
  
});

section.appendChild(container);

function scrollToId(id) {
  
  var index = dataArray.findIndex(function(item) {
    return item.url === id
  });
  
  if (index === -1) {
    throw new Error('Failed to find `id` in `dataArray`');
  }
  
  var scroller = new Scroller(list, container, index);
    scroller.scroll();
  
}

function Scroller(list, container, index) {
  
  this.list = list;
  this.container = container;
  this.index = index;
  
  this.scroll = function() {
    
    var nextPosition = this.list._itemPositions[index];
    if (nextPosition - this.container.scrollTop <= 1) {
      return;
    }
    
    this.container.scrollTop = nextPosition;
    
    window.requestAnimationFrame(this.scroll);
    
  }
  
  this.scroll = this.scroll.bind(this);
  
}

function createDataArray() {
 
  var sampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis, lorem ut placerat fermentum, nibh justo euismod ex, eu varius urna massa a est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ornare dapibus lorem ac faucibus. Vestibulum arcu lorem, lacinia vestibulum mi quis, finibus auctor diam. Aenean ut tristique tellus. Etiam consectetur ante ex, a congue diam mollis a. Praesent vitae orci sit amet odio porttitor vehicula elementum et mauris. Praesent pellentesque blandit eros, a facilisis sapien tincidunt euismod. \n\nSed bibendum tellus vel nisl cursus lacinia. Pellentesque ornare purus nec massa pulvinar, eu vestibulum turpis auctor. Nullam in nibh quam. Nunc dapibus vitae metus at malesuada. Ut et turpis ornare metus malesuada fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim, elit quis facilisis blandit, turpis dolor pulvinar felis, quis aliquam mauris nulla in quam.';
  
  return (new Array(1000)).fill(1).map(function (_, index) {
  
  return { text: sampleText, url: '#' + index };
  
});
  
}

#infinite-list {
  height: 180px;
  width: 100%;
  border: 1px solid black;
}

#offscreen {
  position: fixed !important;
  left: -9999px !important;
  width: 100%;
}

/* Optional eye candy below: */
article {
  text-transform: capitalize;
  padding: 10px;
  border-bottom: 1px solid yellowgreen;
}

article:hover {
  background: #ccc;
}

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

<section id='infinite-list'>
</section>

<section id='offscreen'></section>

codepen链接:https://codepen.io/kidroca/pen/NoYpOy