Uso de carga diferida vue-lazy en proyectos Vue

1. Primero prepare las imágenes requeridas y colóquelas en: directorio src\common\image

por defecto.jpg

por defecto.png

El propósito de las imágenes con carga diferida: cuando las imágenes materiales en su página no se muestran, deje que las imágenes con carga diferida se muestren primero.

2. Descarga vue-lazyload en tu proyecto Vue

cnpm install vue-lazyload --save-dev

Luego, vaya a su archivo de configuración package.json para ver si la descarga se realizó correctamente.

"vue-lazyload": "^1.3.3",

3. Introduzca vue-lazyload en el archivo de entrada main.js

// 引入懒加载之前，先下载懒加载
// cnpm install vue-lazyload --save-dev
import VueLazyload from 'vue-lazyload';

4. Luego use vue-lazyload en main.js

Vue.use(VueLazyload,{
  // 这里表示在加载时要显示的图片的路径
  loading: require('common/image/default.jpg')
})

5. Vaya a la capa de vista correspondiente y cambie el atributo :src de la etiqueta img original a la instrucción v-lazy.

Originalmente esto era:

<img :src="i.picUrl" alt="" />

Cámbialo por esto:

<img v-lazy="i.picUrl" alt="" />