Taolin · 懒加载、渐进图像

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

导入

CodeBlock Loading...

运用

CodeBlock Loading...

参考

https://blog.csdn.net/weixin_40725601/article/details/89426638

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
});

CodeBlock Loading...

运用

v-lazy="" 代替 img=""

CodeBlock Loading...

参考

https://blog.csdn.net/weixin_40725601/article/details/89426638