Vue图片懒加载

Posted 2020-12-02 linzhanfeng

图片懒加载的原理

先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

实现步骤：

1.安装插件：

   npm install vue-lazyload --save-dev
   
   2. main.js引入插件：
   import VueLazyLoad from ‘vue-lazyload‘
   Vue.use(VueLazyLoad,{
    error:require(‘./statics/site/imgs/erro.jpg‘),
    loading:require(‘./statics/site/imgs/load.gif‘)
   })
   
   3.vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

   <img v-lazy="item">
  
   备注：若全局安装了Mint UI，在main.js中引入了Mint UI可以省略步骤1和2。

   详细解读参考链接：https://mp.weixin.qq.com/s/Syqoz_Hkh7JY4GYIu_TE3A