懒加载、渐进图像
前端
vue-lazyload-img
:VUE图片懒加载插件
vue-progressive-image
:VUE的渐进图像加载插件
渐进式
延迟加载
延迟加载是一种在页面加载时推迟非关键资源加载的技术。
为了更快地在屏幕上显示内容,我们显示了一个缩放到全宽的模糊微小图像。加载完整尺寸的图像后,我们将其换出。
npm install progressive-image --save
import progressive from 'progressive-image/dist/vue'; // 渐进式
Vue.use(progressive, {
removePreview: true,
scale: true
})
引入样式文件
<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">
运用
<div v-for="(item) in img">
<div class="space"></div>
<div class="progressive">
<img class="preview" v-progressive="item" :data-srcset="item" :src="item"
style="width:600px; height:400px; object-fit: cover;"
/>
</div>
</div>
懒加载
npm install vue-lazyload --save-dev
导入
import VueLazyLoad from 'vue-lazyload'; // 懒加载
import LoadingGif from '@theme/assets/loading.gif'
Vue.use(VueLazyload, {
preLoad: 1,
loading: LoadingGif,
attempt: 1
});
运用
v-lazy="" 代替 img=""
参考
https://blog.csdn.net/weixin_40725601/article/details/89426638