在 JavaScript 中，可以使用一些方法来实现延迟加载，延迟加载的核心思想是在用户需要数据时才进行加载，从而提高网页的响应速度。
以下是实现延迟加载的常见方法:
懒加载
对于图片加载，可以使用图片懒加载来实现延迟加载的效果。图片懒加载可以在页面滚动到图片需要加载的位置时，才开始加载图片。
HTML 代码：
<img src="placehodler.jpg" data-src="real-image.jpg" />
JavaScript 代码：
// 1. 获取所有需要懒加载的图片元素let images = document.querySelectorAll("img[data-src]");// 2. 遍历需要懒加载的图片元素for (let img of images) {// 3. 判断图片是否进入视口if (isInViewport(img)) {// 4. 加载图片img.src = img.dataset.src;}}// 5. 监听页面滚动事件，实时更新图片的加载状态document.addEventListener("scroll", function () {for (let img of images) {if (isInViewport(img) && !img.src) {img.src = img.dataset.src;}}});// 判断元素是否进入视口function isInViewport(el) {let rect = el.getBoundingClientRect();return (rect.bottom > 0 &&rect.top < window.innerHeight &&rect.right > 0 &&rect.left < window.innerWidth);}
上述代码中，我们首先获取所有需要懒加载的图片元素，然后遍历这些元素，判断是否需要加载。判断的方法是使用了 isInViewport 函数，该函数用于判断图片是否已经进入用户的可视范围。如果图片已经进入可视范围，则将图片的 data-src 属性设为 src 属性，从而达到延迟加载的效果。
