自定义属性的获取方法： 使用 getAttribute 方法可以获取自定义属性。例如：

element.getAttribute('data-src')

这样可以轻松获取存储在自定义属性中的图片地址。

相关的内置方法和属性：

• clientHeight：表示当前页面的 viewport 高度。
• scrollHeight：表示页面总高度。
• offsetTop：表示元素相对于 viewport 的垂直位置。
• scrollTop：表示页面当前滚动的位置。

图片加载的触发条件： 当页面滚动到某个位置时，检查是否需要加载下一张图片。通常的触发条件是：当前图片的 offsetTop 小于等于 viewport 的高度加上当前滚动位置。

获取所有图片元素： 首先，获取页面中所有的图片元素。可以使用 getElementsByTagName 方法。

const imgs = document.getElementsByTagName('img');

初始化变量：

• n：记录当前已经加载的图片数量。
• seeHeight：记录 viewport 的高度，通常设置为 document.documentElement.clientHeight。
• h：记录每张图片的高度，通常通过 getAttribute('date-h') 获取。
• index：计算初始时可以同时加载的图片数量。

初始化加载： 根据 viewport 的高度和每张图片的高度，计算初始时可以同时加载的图片数量，并设置这些图片的 src 属性。

const seeHeight = document.documentElement.clientHeight;
const h = imgs[0].getAttribute('date-h');
const index = Math.floor(seeHeight / h);
for (let i = 0; i <= index; i++) {
    imgs[i].src = imgs[i].getAttribute('date-src');
}

滚动触发加载： 在页面滚动时，检查是否需要加载下一张图片。具体实现如下：

window.onscroll = function() {
    for (let i = n; i < imgs.length; i++) {
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (imgs[i].offsetTop < seeHeight + scrollTop) {
            if (imgs[i].getAttribute('src') === '') {
                imgs[i].src = imgs[i].getAttribute('date-src');
            }
            n = i + 1;
        }
    }
}