jq 图片懒加载 + Vue-Lazyload

jq原生  图片 懒加载 

图片懒加载的原理--三种方法实现_图片懒加载的实现原理-CSDN博客

---

vue-lazyload 安装插件安装

Vue-Lazyload官网： vue-lazyload - npm

Api文档:   IntersectionObserver API 使用教程 - 阮一峰的网络日志 (ruanyifeng.com) 

安装

npm install vue-lazyload --save

# 或者

yarn add vue-lazyload

 main.js

import Vue from 'vue'  
import VueLazyload from 'vue-lazyload'  
  
// 配置项  
const options = {  
  preLoad: 1.3,  
  error: 'dist/error.png', // 图片加载失败时显示的图片  
  loading: 'dist/loading.gif', // 图片加载时显示的图片  
  attempt: 1 // 尝试加载次数  
}  
  
// 使用插件  
Vue.use(VueLazyload, options)

页面