Vue项目中实现图片懒加载

Vue项目中实现图片懒加载

---对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。 实现方法(使用vue的vue-lazyload插件) 1.安装插件

npm install vue-lazyload --save-dev

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

import VueLazyload from 'vue-lazyload'

直接使用

Vue.use(VueLazyload)

或者添加自定义选项

//main.js
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('@/assets/img/dou_dou.jpg'),   //请求失败后显示的图片
  loading: require('@/assets/img/dou_dou.jpg'),   //加载的loading过渡图片
  attempt: 1     // 加载图片数量
})

3.修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）

<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage"></a>

懒加载原理： 提前给所有的图片设置宽和高来占位 不设置图片的src属性，而是自定义一个data-src属性来储存图片的路径 判断当前屏幕的位置（图片的top值和屏幕底部的值），来进行是否显示图片，如果需要显示的话，把data-src的值给src。

 var imgs = document.querySelectorAll("img");
            
        //设置滚动事件
        window.onscroll = lazyloadFn;
        
        //屏幕的高度
        var sh = window.innerHeight;
        
        //刚进来需要调用一下
        lazyloadFn();
        
        //图片懒加载的方法
        function lazyloadFn() {
            //获取滚动的距离
            var st = document.body.scrollTop;
            
            //计算滚动中的底部的值
            var sn = sh + st;
            
            for(var i = 0; i < imgs.length; i++){
                if (imgs[i].offsetTop <= sn) {
                    imgs[i].src = imgs[i].getAttribute("data-src");
                }
            }
        }