JavaScript实现非等高元素的虚拟滚动加载

虚拟滚动加载是一种优化长列表渲染性能的技术，它可以在页面上只渲染可见区域内的元素，而不是一次性渲染所有的元素。这对于包含大量元素的列表或表格特别有用，可以提高页面的加载速度和性能。

在这篇文章中，我们将使用JavaScript实现一个非等高元素的虚拟滚动加载示例。我们将使用Intersection Observer API来检测元素是否可见，并根据可见区域内的元素动态加载和卸载元素。

首先，我们需要准备一些HTML结构和样式。我们将创建一个包含大量非等高元素的容器，并设置一个固定高度的可见区域容器。

<style>
  .container {
     
     
    height: 500px;
    o