本文共 1431 字，大约阅读时间需要 4 分钟。

解决有两步：

1.采用加载：原图未加载完时显示比它内存小的模糊图；

2.采用：只加载可视区域的图片，即滚动到可视区域时再加载图片

vue-lazyload-img：VUE图片懒加载插件

vue-progressive-image：VUE的渐进图像加载插件

渐进式加载

引入依赖

npm install progressive-image --save

main.js引入

import progressive from 'progressive-image/dist/vue'; // 渐进式import 'progressive-image/dist/index.css';//样式Vue.use(progressive, {    removePreview: true,    scale: true})

页面引入CSS样式

   或者在main.js引入import 'progressive-image/dist/index.css';

vue组件封装

// 图片渐进式加载
   

 使用

使用
   引入import vProgressive from "../components/progressive/progressive";数据源data() {    return {      imgs: [        {          src: require("../assets/img/qg/bg_reg.png"), //小          preview: require("../assets/img/qg/bg_QG.png"), //大        },      ],}

图片懒加载

引入依赖

npm install vue-lazyload --save-dev

main.js引入

import VueLazyLoad from 'vue-lazyload'; // 懒加载Vue.use(VueLazyLoad,{	error:'../static/img/tzb.jpg', // 加载错误的图片	loading:'../static/img/tzb.jpg' // 加载时的图片});

附源码 

main.js

import VueLazyLoad from 'vue-lazyload'; // 懒加载Vue.use(VueLazyLoad,{	error:'../static/logo.png', // 加载错误的图片	loading:'../static/image/img02.jpg' // 加载时的图片});import progressive from 'progressive-image/dist/vue'; // 渐进式import 'progressive-image/dist/index.css';//样式Vue.use(progressive, {    removePreview: true,    scale: true})

 演示

转载地址：https://jackiehao.blog.csdn.net/article/details/110948048 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！