大图加载神器--渐进式图片加载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

<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>