提问

1.什么是图片懒加载
2.它是用来干什么的
3.它的原理是什么
4.它的优点在哪里

Hi，我是iKun。今天的问题是关于图片懒加载的一个问题：在平时浏览网页的时候，大家有没有发现，如果你的网速稍微较慢，那么他会出现一种情况，那就是转圈圈，通过它来提示你这个图片正在加载中，让你稍安勿躁，那么今天我们就围绕图片懒加载来回答。

回答

1：不知道大家有没有听过按需加载这个名词，就是按照自己的需要来加载某一些东西，简而言之，就是在你需要的时候他才会加载，在你不需要的时候，他就不会加载，通俗点来说就是延时加载。

2：关于它是用来干什么的，我觉得大家看完上述文案已经大概了解的七七八八了，那么我们现在来聊赖它是用来干什么的。大家知道，当我的电脑运行的东西过多时，电脑就会变得很卡顿，同样的道理，当我们一次性加载的东西很多时，就会使读取速度变得很慢，从而影响用户体验，这时候图片懒加载迎难而上，为我们解决这个问题，他所要做的就是不加载没有出现在视图区域的图片，只有你在滚动，点击，刷新的时候，当判断出现在视图区域时，来加载这些图片在这之前其他的给他一个占位loading图就可以了。

3.先将所有的img的标签中的src设置为同一张图片，将真正的图片地址储存在自定义属性之中。当我们的js监听到这个图片入场的时候呢，他就会将自定义属性的地址存到src，这样的话，我们的懒加载效果就完成了。

4.它的优点就在于可以分多次请求，减轻首页第一次的加载量，减轻服务器压力并且如果用户的网络较慢，它所提供的占位loading图可以撑起布局，使布局美观也提醒用户正在加载，提高用户体验。

图示

实现流程

第一步：安装
npm install vue-lazyload --save

第二步：全局注册
main.js 文件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

第三步
<img v-lazy="图片地址" :key="图片地址">

那么到此为止，我们的图片懒加载就告一段落啦，下期再见

Vue图片懒加载

提问

回答

图示

实现流程