渐进式图片加载 progressive-image

效果如上图所示，代码如下所示：

---

第一步安装

$ 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

"//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">
        <img
          class="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
});