大图加载神器--渐进式图片加载progressive-image

Posted 2023-01-22 JackieDYH

 

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

---

第一步安装

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