vuedose.tips（翻译系列十六）

Lazy load images with v-lazy-image

前一段时间，我想在图像中应用延迟加载，以便仅在它们进入视口时才加载它们。

研究后，我找到了不同的方法来做，但是它们比我想要的要麻烦一些。

我想要像具有延迟加载相同的<img>标签一样简单的东西。

That’s why I createdv-lazy-image, a Vue.js component that extends the<img>tag API and applies lazy loading.

To use it, once you install it by runningnpm install v-lazy-image, you can add it globally to your project:

// main.js  import Vue from  "vue";  import  { VLazyImagePlugin }  from  "v-lazy-image"; Vue.use(VLazyImagePlugin);

And then is as simple to use as using an<img>:

<template>  <v-lazy-image src="http://lorempixel.com/400/200/"  />  </template>

您甚至可以通过为较小的图像（通常是图像的小版本）设置src-placeholder属性来使用渐进式图像加载技术，甚至可以使用CSS来应用自己的过渡效果：

<template>
  <v-lazy-image
    src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
  />
</template>

<style scoped>
  .v-lazy-image {
    filter: blur(10px);
    transition: filter 0.7s;
  }
  .v-lazy-image-loaded {
    filter: blur(0);
  }
</style>

You can checkoutthis demomade by@aarongarciahwhere you can see it in action with many different CSS effects!