懒就是生产力之图片懒加载

时间 2019-12-10

标签就是生产力图片加载繁體版

原文原文链接

最近负责的项目渐渐的由业务型转向营销型，营销内容愈来愈多，图片也就多了起来。图片一多起来问题就来了，一上来几十张图片加载起来半天都过去了，咋办？凉拌--懒加载javascript

什么是懒加载

懒加载也叫延迟加载，本质上就是按需加载，即只有当图片dom已经在或者即将进入用户视线范围内的时候才去加载对应的dom图片。前两年流行的瀑布流其实就是按需加载的一个应用实例。java

在懒加载的模型中，一个页面能够氛围三个区域如图，视图区、即将进入视图区、视图远区（即图中的不加载区）。

当一个图片在视图区或者随着屏幕滚动即将进入视图区的时候，就开始加载图片。node

懒加载的处理流程

大象装冰箱，也得分三步，懒加载也同样
首先，将图片标签加入懒加载队列lazyQueue，而且给图片加载一个默认图，通常是个品牌logo或者1px*1px的空白图片作拉伸。加载默认图主要是为了看起来不那么尴尬，用户广泛尴尬耐受力强的能够不加～
其次，添加屏幕滚动监听事件，如mousemove、wheel滚动等，实时监听懒加载队列lazyQueue中的dom位置变更。这一步算是懒加载的核心了吧。
最后，在监听器中实时判断图片dom的位置，若是已进入加载区的位置就去加载图片，加载完成后把响应的dom移出lazyQueue。
直接上代码吧，怎么感受这么墨迹。。。app

完整代码

/* global Image */
if (!Array.prototype.$remove) {
    Array.prototype.$remove = function(item) {
        if (!this.length) return
        const index = this.indexOf(item)
        if (index > -1) {
            return this.splice(index, 1)
        }
    }
}

export default (Vue, Options = {}) => {
    const isVueNext = Vue.version.split('.')[0] === '2'

    const DEFAULT_URL = Options.bgImgUrl || 'https//img.aiyoumi.com/null/2018423/101212916/20180423101212_1x1.png?height=1&width=1'

    const Init = {
        preLoad: Options.preLoad || 1.8,
        error: Options.error || DEFAULT_URL,
        loading: Options.loading || DEFAULT_URL,
        attempt: Options.attempt || 3,
        scale: Options.scale || window.devicePixelRatio,
        hasbind: false
    }

    const Listeners = []
    const imageCache = []

    const throttle = function(action, delay) {
        let timeout = null
        let lastRun = 0
        return function() {
            if (timeout) {
                return
            }
            let elapsed = (+new Date()) - lastRun
            let context = this
            let args = arguments
            let runCallback = function() {
                lastRun = +new Date()
                timeout = false
                action.apply(context, args)
            }
            if (elapsed >= delay) {
                runCallback()
            } else {
                timeout = setTimeout(runCallback, delay)
            }
        }
    }

    const _ = {
        on(el, type, func) {
            el.addEventListener(type, func)
        },
        off(el, type, func) {
            el.removeEventListener(type, func)
        }
    }

    const lazyLoadHandler = throttle(() => {
        for (let i = 0, len = Listeners.length; i < len; ++i) {
            checkCanShow(Listeners[i])
        }
    }, 300)

    const onListen = (el, start) => {
        if (start) {
            _.on(el, 'scroll', lazyLoadHandler)
            _.on(el, 'wheel', lazyLoadHandler)
            _.on(el, 'mousewheel', lazyLoadHandler)
            _.on(el, 'resize', lazyLoadHandler)
            _.on(el, 'animationend', lazyLoadHandler)
            _.on(el, 'transitionend', lazyLoadHandler)
        } else {
            Init.hasbind = false
            _.off(el, 'scroll', lazyLoadHandler)
            _.off(el, 'wheel', lazyLoadHandler)
            _.off(el, 'mousewheel', lazyLoadHandler)
            _.off(el, 'resize', lazyLoadHandler)
            _.off(el, 'animationend', lazyLoadHandler)
            _.off(el, 'transitionend', lazyLoadHandler)
        }
    }

    const checkCanShow = (listener) => {
        if (imageCache.indexOf(listener.src) > -1) {
            return setElRender(listener.el, listener.bindType, listener.src, 'loaded')
        }
        let rect = listener.el.getBoundingClientRect()
        if ((rect.top < window.innerHeight * Init.preLoad && rect.bottom >= 0) && (rect.left < window.innerWidth * Init.preLoad && rect.right >= 0)) {
            render(listener)
        }
    }

    const setElRender = (el, bindType, src, state) => {
        // 避免重复render
        let stateDone = el.getAttribute('lazy') === 'loaded'
        if (stateDone) {
            return
        }

        if (!bindType) {
            el.setAttribute('src', src)
        } else {
            el.setAttribute('style', bindType + ': url(' + src + ')')
        }

        // 默认会给图片添加有渐显效果的类名
        if (state === 'loaded' && (el.className.indexOf('animation__fade') === -1)) {
            el.className += ' animation__fade'
        }
        el.setAttribute('lazy', state)
    }

    const render = (item) => {
        if (item.attempt >= Init.attempt) {
            return false
        }
        item.attempt += 1
        loadImageAsync(item)
            .then((image) => {
                setElRender(item.el, item.bindType, item.src, 'loaded')
                imageCache.push(item.src)
                Listeners.$remove(item)
            })
            .catch((error) => {
                setElRender(item.el, item.bindType, item.error, 'error')
            })
    }

    const loadImageAsync = (item) => {
        return new Promise((resolve, reject) => {
            let image = new Image()
            image.src = item.src

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

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

    const componentWillUnmount = (el, binding, vnode, OldVnode) => {
        if (!el) {
            return
        }

        for (let i = 0, len = Listeners.length; i < len; i++) {
            if (Listeners[i] && Listeners[i].el === el) {
                Listeners.splice(i, 1)
            }
        }

        if (Init.hasbind && Listeners.length === 0) {
            onListen(window, false)
        }
    }

    const checkElExist = (el) => {
        let hasIt = false

        Listeners.forEach((item) => {
            if (item.el === el) hasIt = true
        })

        if (hasIt) {
            return Vue.nextTick(() => {
                lazyLoadHandler()
            })
        }
        return hasIt
    }

    const addListener = (el, binding, vnode) => {
        /* if (el.getAttribute('lazy') === 'loaded') {
            return
        }
        if (checkElExist(el)) {
            return
        } */
        // 跳过没必要要刷新
        if (binding.value === binding.oldValue) {
           return 
        }

        let parentEl = null
        let imageSrc = binding.value
        let imageLoading = Init.loading
        let imageError = Init.error

        if (typeof binding.value !== 'string') {
            imageSrc = binding.value.src
            imageLoading = binding.value.loading || Init.loading
            imageError = binding.value.error || Init.error
        }
        if (binding.modifiers) {
            parentEl = window.document.getElementById(Object.keys(binding.modifiers)[0])
        }

        setElRender(el, binding.arg, imageLoading, 'loading')

        vnode.context.$nextTick(() => {
            Listeners.push({
                bindType: binding.arg,
                attempt: 0,
                parentEl: parentEl,
                el: el,
                error: imageError,
                src: imageSrc
            })

            if (Listeners.length > 0 && !Init.hasbind) {
                Init.hasbind = true
                onListen(window, true)
            }
            if (parentEl) {
                onListen(parentEl, true)
            }
            lazyLoadHandler()
        })
    }

    Vue.directive('lazy', {
        bind: addListener,
        update: addListener,
        componentUpdated: lazyLoadHandler,
        unbind: componentWillUnmount
    })
}

当你看到这，我要谢谢你，这篇博客零零散散写了好几次，搁置了小一年了。。。不知道在想啥。。。什么什么都怎么写的都有点乱了。。。烂尾了。。。实在抱歉，下不为例～dom