始めにボヤっと表示されるlazy load「vue-progressive-image」

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-progressive-image.min.js"></script>
<div id="app">
  <p><button @click="reload">reload</button></p>
  <ul>
      <li v-for="n in cnt">
        <progressive-img 
          src="https://unsplash.it/1920/1080?image=10"
          placeholder="https://unsplash.it/1920/1080?image=10"
          ></progressive-img>
      </li>
  </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

ul {
  width: 100%;
  list-style: none;
}
ul li {
  width: 45%;
  padding: 5px;
  border: solid 1px #000;
  float: left;
}

Vue

const VueProgressiveImage = window.default;

Vue.use(VueProgressiveImage, {
  blur: 30,
  delay: 2000
});

let app = new Vue({
  el: '#app',
  data: {
    cnt : 4
  },
  methods: {
    reload: function(){
      location.reload();
    }
  }
});