Javascript 滚动时将HTML从其他文件动态加载到页面上

编辑：我已经回答了自己一半的问题，但仍然需要帮助。请看下面

原创帖子： 我正在为会员改造一个网站，其中包含一个图片库，可以用于营销目的。以前，每个类别都被分为子类别，结果是有几百页，有些页面只有一张图片。我已经放弃了子类别，在每个类别页面上都包含了所有的图片。当你点击缩略图时，完整尺寸的图像会在一个带有附加信息的灯箱中打开

这对于大多数类别来说都很好，但有些类别很大，包含几百张图像。问题是，在这些页面上，大多数时候并不是所有的缩略图都会加载。我希望在向下滚动时动态加载更多内容，而不是使用分页将这些大类别划分为多个页面。我不知道怎么做

上的代码段看起来可以工作，但是有没有替代的方法

动态数据：这是测试数据。
下一行。

用一些东西来代替

file1.html

的内容，然后是

file2.html

，依此类推

如果没有，是否有办法创建某种文件，在用户向下滚动时可以引用和加载缩略图位置

---

这似乎是一个很好的起点，但它需要一个AJAX调用或其他调用。我不确定这意味着什么以及它调用的位置。

现在您可以使用tag

load=“lazy”

例如：

<img src="image.png" loading="lazy" width="200" height="200">

---

更多信息：

要在Javascript中加载更多内容（并使用jQuery），可以使用以下命令：

$.ajax("path/to/your/file/file1.html")
  .done((data) => {
    $('body').append(data);
  });

它的作用是：

获取

file1.html的内容

将内容添加到当前网站的正文中

更多信息：

---

多亏了，我找到了使用IntersectionObserver的潜在解决方案。它在Chrome和更新版本的Firefox中运行良好

遗憾的是，我们仍然以IE11为标准对我们的网站工作进行编码。我不知道为什么，但我们这样做了，我必须解决这个问题。问题是这个解决方案不适用于我用于验证的旧版本Firefox，也不适用于IE11。所以我想用多边形填充

polyfill的页面介绍了如何使用

来支持较旧的浏览器，但它似乎不起作用。我还将polyfill JavaScript文件放在了网站上，并在页面标题中引用了它，而不是其他JavaScript文件，但它似乎也不起作用

加载polyfill文件的正确方法是什么

引用它的第一行是：

然后在到达交叉点观察点之前有一些无关的东西；淡入和调用延迟加载脚本的CSS：

.淡入{
动画名称：fadeIn；
动画持续时间：1.3s；
动画计时功能：立方贝塞尔（0,0,0.4,1）；
动画填充模式：正向；
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
.居中{
显示：块；
保证金：0自动；
}
从“./pathto/lazy load.js”导入LazyLoad；
LazyLoad.init（）；

这将是完美的，除非它似乎只被Chrome支持。那代码去哪里了？在页面标题的标记之间，或者我希望内容显示在哪里？它位于外部JS脚本或内联标记中-一个流行的观点是将其放在结束标记之前（请参阅）