//  先获取页面中所有的图片
// 循环所有的图片的offsetTop
// 加载条件：图片的 offsetTop 当前浏览器显示区 + 滚动条的高度
window.onload = function () { //页面加载完成后执行
    class lazyLoad {
        constructor() {
            this.imgs = document.querySelectorAll('img');
            this.init();
        }
        init() {
            this.load();
            this.eventBind();
        }
        load(img) {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let winH = window.innerHeight
            for (let i = 0; i < this.imgs.length; i++) {
                // 判断加载条件
                if (this.imgs[i].offsetTop < scrollTop + winH) {
                    this.imgs[i].src = this.imgs[i].getAttribute('data-src')
                    this.imgs[i].style.opacity = 1;
                }
            }
        }
        eventBind() {
            document.addEventListener('scroll', this.load.bind(this));
        }
    }

    new lazyLoad();
};