原生 和 Vue 分别是如何使用”懒加载“？

前言

懒加载，是对前端的一种优化方法。通过它可以有效的降低请求量，让页面加载速度快到飞起，减轻服务器的压力，节省流量，提升用户的体验。

---

一、原生方法引用懒加载（函数节流+函数防抖）(throttle + debounce)

（1）先直接引入以下.js文件

window.onload = function(){

    var scrollTop = window.scrollY;
    var imgs = Array.from(document.querySelectorAll('img'));
    lazyLoad();
    // 采用了节流函数
    window.addEventListener('scroll',throttle(lazyLoad,500,1000));

    function throttle(fun, delay, time) {
        var timeout,
            startTime = new Date();
        return function() {

            var context = this,
                args = arguments,
                curTime = new Date();
            clearTimeout(timeout);
            // 如果达到了规定的触发时间间隔，触发 handler
            console.log(curTime - startTime)
            if (curTime - startTime >= time) {
                fun();
                startTime = curTime;
                // 没达到触发间隔，重新设定定时器
            } else {
                timeout = setTimeout(fun, delay);
            }
        };
    };
    // 实际想绑定在 scroll 事件上的 handler
    // 需要访问到imgs ,  scroll 
    function lazyLoad(){
        scrollTop = window.scrollY;
        imgs.forEach((item,index)=>{
            if( scrollTop===0 && item.dataset.src !== '' && item.offsetTop < window.innerHeight + scrollTop ){
                // alert()
                item.setAttribute('src',item.dataset.src)
                item.setAttribute('data-src','')
            }else if( item.dataset.src !== '' && item.offsetTop < window.innerHeight + scrollTop && item.offsetTop > scrollTop ){
                item.setAttribute('src',item.dataset.src)
                item.setAttribute('data-src','')
            }
        })
    }

}

---

（2）在需要懒加载的图片上，将 ‘src’ 改为 ‘data-src’

例如：

<img src="salaheiyou.jpg">

改为：

<img data-src="salaheiyou.jpg"

---

（3）注意要给懒加载的 img 指定宽（width）或者高（height），否则会失效。

---

二、Vue中通过安装插件来实现

（1）安装插件

install vue-lazyload --save-dev

---

（2）在入口的文件 main.js 中引入并使用

import VueLazyload from 'vue-lazyload'

---

（3）注册

Vue.use(VueLazyload)

---

（4）修改图片的显示方式为懒加载（可以直接将 src 或者 :src 属性改为 v-lazy）
例如：

<img :src="salaheiyou.jpg">

改为：

<img v-lazy="salaheiyou.jpg">

---