效果如上圖所示，代碼如下所示：

---

第一步安裝

$ npm install progressive-image --save$ yarn add progressive-image

---

第二步HTML + JS +CSS

HTML

<main id="app"><template v-for="item in imgs"><div class="space"></div><div class="progressive"><img class="preview" v-progressive="item.src" :data-srcset="item.srcset" :src="item.preview" /></div></template> </main>

CSS

<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

代碼在下面實例中

JS

import Vue from 'vue' import progressive from 'progressive-image/dist/vue'Vue.use(progressive, {removePreview: true,scale: true })new Vue({name: 'demo',el: '#app',data: {imgs: [{src: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/2.jpg',preview: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/r2.jpg'},{src: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/3.jpg',preview: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/r3.jpg'}]} })

---

實例代碼如下：

<template><div class="hello"><main id="app"><template v-for="(item,index) in imgs"><div class="space" :key="index"></div><div class="progressive" :key="index"><img class="preview" v-progressive="item.src" :data-srcset="item.srcset" :src="item.preview" /></div></template></main></div> </template><script> import Vue from 'vue' import progressive from 'progressive-image/dist/vue' Vue.use(progressive, {removePreview: true,scale: true })export default {name: 'HelloWorld',data () {return {imgs: [{src: 'https://t4.focus-img.cn/sh120x90sh/bet/res/cd38686e83b02b656f0041135ff19710.jpg',preview: 'https://t4.focus-img.cn/sh120x90sh/bet/res/3b9a64a0c7c081caafb33f59628b2d0b.jpg'},{src: 'https://t.focus-img.cn/sh520x390sh/xf/zxc/e7e9a71f0957b31bf22fe086c226d95e.jpg',preview: 'https://t3.focus-img.cn/sh120x90sh/bet/res/eb81b6fb7bde1efb1466c37b44efb065.jpg'}]}} } </script><style scope> #app{width:500px;margin:0 auto; } .progressive {position: relative;display: block;overflow: hidden;margin-top:200px; } .progressive img {display: block;width: 100%;max-width: 100%;height: auto;border: 0 none; } .progressive img.preview {filter: blur(2vw);transform: scale(1.05); } .progressive img.hide {opacity: 0; } .progressive img.origin {position: absolute;left: 0;top: 0;animation: origin 1.5s ease-out; } .progressive img.origin-scale {position: absolute;left: 0;top: 0;animation: origin-scale 1s ease-out; } @-moz-keyframes origin {0% {opacity: 0;}100% {opacity: 1;} } @-webkit-keyframes origin {0% {opacity: 0;}100% {opacity: 1;} } @-o-keyframes origin {0% {opacity: 0;}100% {opacity: 1;} } @keyframes origin {0% {opacity: 0;}100% {opacity: 1;} } @-moz-keyframes origin-scale {0% {opacity: 0;transform: scale(1.1);}100% {opacity: 1;transform: scale(1);} } @-webkit-keyframes origin-scale {0% {opacity: 0;transform: scale(1.1);}100% {opacity: 1;transform: scale(1);} } @-o-keyframes origin-scale {0% {opacity: 0;transform: scale(1.1);}100% {opacity: 1;transform: scale(1);} } @keyframes origin-scale {0% {opacity: 0;transform: scale(1.1);}100% {opacity: 1;transform: scale(1);} }</style>

如果使用單張圖片：

組件可以這樣子使用

父組件：

<Progressive :list="item"></Progressive>

item對象中包含，原始圖片和預加載的圖片。

漸進式組件：

<template><main id="progressive-test"><template><div class="space"></div><div class="progressive"><imgclass="preview"v-progressive="list.image":data-srcset="list.srcset":src="list.preview"/></div></template></main> </template><script> export default {name: "Progressive",props: {list: {default: {},type: Object}},data() {return {imgs: [{src:"https://image-dev.wmpvp.com/upload/pvp/a9/be/a9be1875d195d00220d9e9c7893bff251578554016.jpg",preview:"https://img.dota2.com.cn/file/76/d1/76d172e5752055be393b015db17fe7f91579426293.jpg"}]};} }; </script><style lang="scss" scope> @import "../../../../../node_modules/progressive-image/dist/index.css"; .progressive {position: relative;display: block;overflow: hidden; } .progressive img {display: block;width: 100%;max-width: 100%;height: auto;border: 0 none; } .progressive img.preview {filter: blur(2vw);transform: scale(1.05); } .progressive img.hide {opacity: 0; } .progressive img.origin {position: absolute;left: 0;top: 0;animation: origin 1.5s ease-out; } .progressive img.origin-scale {position: absolute;left: 0;top: 0;animation: origin-scale 1s ease-out; } @-moz-keyframes origin {0% {opacity: 0;}100% {opacity: 1;} } @-webkit-keyframes origin {0% {opacity: 0;}100% {opacity: 1;} } @-o-keyframes origin {0% {opacity: 0;}100% {opacity: 1;} } @keyframes origin {0% {opacity: 0;}100% {opacity: 1;} } @-moz-keyframes origin-scale {0% {opacity: 0;transform: scale(1.1);}100% {opacity: 1;transform: scale(1);} } @-webkit-keyframes origin-scale {0% {opacity: 0;transform: scale(1.1);}100% {opacity: 1;transform: scale(1);} } @-o-keyframes origin-scale {0% {opacity: 0;transform: scale(1.1);}100% {opacity: 1;transform: scale(1);} } @keyframes origin-scale {0% {opacity: 0;transform: scale(1.1);}100% {opacity: 1;transform: scale(1);} } </style>

main.js

import Vue from "vue"; import progressive from "progressive-image/dist/vue"; Vue.use(progressive, {removePreview: true,scale: true });

總結

以上是生活随笔為你收集整理的渐进式图片加载 progressive-image的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。