我可以从另一个页面懒加载内容吗？

Question

我创建了一个页面，该页面可以从其他几页中加载<div>内容，并将其显示在一个主页中（与新闻网站的主页非常相似）。

我正在使用JavaScript .load()引入外部内容。

问题是：我添加的.load()个项目越多，主页加载的速度就越慢。

我看过许多有关延迟加载的文章，却找不到像我这样的场景。这使我相信我对这个问题采取了错误的方法。但是我想不出另一种方式来延迟加载外部内容。

这是我用来从其他页面加载外部<div>内容的基本代码。

<!--Use js to load external div contents from several pages-->
<script type="text/javascript">
$(document).ready(function(){
    $("#heading1").load("https://example.com/page1 #h1_1");
    $("#preview1").load("https://example.com/page1 #p1");
    $("#heading2").load("https://example.com/page2 #h1_1");
    $("#preview2").load("https://example.com/page2 #p1");
});
</script>
<!--Show first external page div contents-->
    <div id="heading1">
    </div>
    <div id="preview1">
    </div>
<!--Show second external page div contents-->
    <div id="heading2">
    </div>
    <div id="preview2">
    </div>

我的问题是：当用户向下滚动该主页时，是否有办法从其他页面上一次延迟加载外部 <div>内容？

就像Facebook在向下滚动时如何懒惰加载帖子。或者，当您向下滚动时，Youtube将如何延迟加载评论。