前端性能优化之图片懒加载

一、什么是图片懒加载？

当访问一个网页的时候，优先显示可视区域内的图片而不是一次性加载所有的图片，但需要显示时再发送图片请求，避免网页打开时加载过多的资源。这样可以有利于前端性能优化，减轻服务器压力以及提升用户体验。

二、使用场景

当一个页面需要一次性载入很多图片时，就需要使用的图片的懒加载

三、vue中使用vue-lazyload实现图片懒加载

1.安装插件 使用npm:

npm install vue-lazyload --save

使用:

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
  Vue.use(VueLazyload)
  ...
</script>

2.文件引用（一般是在main.js里面进行全局使用） main.js:

import Vue from vue
import App from ./App.vue
import VueLazyload from vue-lazyload
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: dist/error.png,
  loading: dist/loading.gif,
  attempt: 1
})
 
new Vue({
  el: body,
  components: {
    App
  }
})

3.使用 template：将img属性的v-bind:src替换为v-lazy

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

使用v-lazy-container：

<div v-lazy-container="{ selector: img }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

自定义错误和加载占位符图像：

<div v-lazy-container="{ selector: img, error: xxx.jpg, loading: xxx.jpg }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

div v-lazy-container="{ selector: img }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

参考：