vue-lazyload-zyr

vue 图片懒加载插件

Installation

$ npm install vue-lazyload-zyr

Example

// main.js
Vue.use(VueLazyLoad, {
  loading: "/public/logo.png",
  error: "/public/error.png",
  preload: 1.2,
});

<template>
  <div id="app">
    <div class="box">
      <img v-for="(url, index) in images" :key="index" v-lazy="url" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-736bc3917fe92142.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-7fe8c323e533f656.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-c12521fbde6c705b.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-caf66b935fd00e18.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-48dd99da471ffa3f.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-4de5440a56bff58f.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-03bbbd715c24750e.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-736bc3917fe92142.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-7fe8c323e533f656.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-c12521fbde6c705b.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-caf66b935fd00e18.jpg",
        "https://upload-images.jianshu.io/upload_images/5809200-48dd99da471ffa3f.jpg",
      ],
    };
  },
};
</script>