loadImg() {
    var img = this.$refs.lazy.getElementsByClassName("lazyImg"); 
    // 已滚动高度+可视区高度
    var top = this.$refs.lazy.scrollTop + this.$refs.lazy.clientHeight;
    
    for(var i = 0; i < img.length; i++) {
        if(img[i].offsetTop <= top) {  // 在可视区内则显示图片
            img[i].src = img[i].getAttribute("data-src");
        }
    }
},
lazyLoad() { 
    this.loadImg();
}

function throttle(func, wait) {
    return function() {
        var timeout;
        var context = this, args = [].slice.call(arguments,1);
        if(!timeout) {
            setTimeout(function(){
                func.apply(context,args);
                timeout = null;
            }, wait)
        }
    }
}
lazyLoad() {
    this.throttle(this.loadImg, 500)();
}

lazyLoad() {
	if(this.$refs.lazy.scrollTop - this.oldScrollTop < 0) {  // 如果向上拉则不做操作
        return ;
    } else {  // 如果向下拉但小于500px则节流加载
        this.throttle(this.loadImg, 500)();
    }
}

 loadImg() {
    var img = this.$refs.lazy.getElementsByClassName("lazyImg"); 
    var top = this.$refs.lazy.scrollTop + this.$refs.lazy.clientHeight;
    
    // 从len开始检查
    for(var i = this.len; i < img.length; i++) {
        if(img[i].offsetTop <= top) {
            img[i].src = img[i].getAttribute("data-src");
            this.len = i;  // 更新len
        }
    }
}

const lazy = new LazyClass(options) // 核心函数
Vue.directive('lazy', {
    bind: lazy.add.bind(lazy),
    update: lazy.update.bind(lazy),
    componentUpdated: lazy.lazyLoadHandler.bind(lazy),
    unbind: lazy.remove.bind(lazy)
})

// 第一行
this._initEvent()
 
// 第二行
this.lazyLoadHandler = throttle(this._lazyLoadHandler.bind(this), this.options.throttleWait)
 
// 第三行
this.setMode(this.options.observer ? modeType.observer : modeType.event)

// 懒加载处理函数
// 将监听队列中loaded状态的监听对象取出存放在freeList中并删掉
// 判断未加载的监听对象是否处在预加载位置，如果是则执行load方法。
_lazyLoadHandler () {
    const freeList = []
    this.ListenerQueue.forEach((listener, index) => {
        if (!listener.state.error && listener.state.loaded) {
            return freeList.push(listener)
        }
        // 判断当前监听对象是否在预加载位置，如果是则执行load方法开始加载
        const catIn = listener.checkInView()
        if (!catIn) return
        listener.load()
    })
    freeList.forEach(vm => remove(this.ListenerQueue, vm))
}

setMode (mode) {
    if (!hasIntersectionObserver && mode === modeType.observer) {
        mode = modeType.event
    }

    this.mode = mode // event or observer

    if (mode === modeType.event) {
        if (this._observer) {
            this.ListenerQueue.forEach(listener => {
                this._observer.unobserve(listener.el)
            })
            this._observer = null
        }

        this.TargetQueue.forEach(target => {
            this._initListen(target.el, true)
        })
    } else {
        this.TargetQueue.forEach(target => {
            this._initListen(target.el, false)
        })
        this._initIntersectionObserver()
    }
}

load (onFinish = noop) {
    // 若尝试次数完毕并且对象状态为error，则打印错误提示并结束。
    if ((this.attempt > this.options.attempt - 1) && this.state.error) {
        if (!this.options.silent) console.log(`VueLazyload log: ${this.src} tried too more than ${this.options.attempt} times`)
        onFinish()
        return
    }

    // 若当前对象状态为loaded并且路径已缓存在imageCache中，则调用this.render('loaded', true)渲染dom真实路径。
    if (this.state.loaded || imageCache[this.src]) {
        this.state.loaded = true
        onFinish()
        return this.render('loaded', true)
    }

    // 若以上条件都不成立，则调用renderLoading方法渲染loading状态的图片。
    this.renderLoading(() => {
        this.attempt++

        this.record('loadStart')

        loadImageAsync({
            src: this.src
        }, data => {
            this.naturalHeight = data.naturalHeight
            this.naturalWidth = data.naturalWidth
            this.state.loaded = true
            this.state.error = false
            this.record('loadEnd')
            this.render('loaded', false)
            imageCache[this.src] = 1
            onFinish()
        }, err => {
            !this.options.silent && console.error(err)
            this.state.error = true
            this.state.loaded = false
            this.render('error', false)
        })
    })
}

// renderLoading方法
renderLoading (cb) {
    // 异步加载图片
    loadImageAsync(
        {
            src: this.loading
        },
        data => {
            this.render('loading', false)
            cb()
        },
        () => {
            // handler `loading image` load failed
            cb()
            if (!this.options.silent) console.warn(`VueLazyload log: load failed with loading image(${this.loading})`)
        }
    )
}

// loadImageAsync方法
const loadImageAsync = (item, resolve, reject) => {
    let image = new Image()
    image.src = item.src

    image.onload = function () {
        resolve({
            naturalHeight: image.naturalHeight,
            naturalWidth: image.naturalWidth,
            src: image.src
        })
    }

    image.onerror = function (e) {
        reject(e)
    }
}