VUE图片懒加载vue-lazyload插件用法

引入

import VueLazyload from "vue-lazyload";

配置error、loading时的图片

import loading from "../src/assets/pubilcImg/loading.gif";
import error from "../src/assets/pubilcImg/error.png";
Vue.use(VueLazyload, {
  error: error,
  loading: loading
});
// 这样的引入也是可以的
Vue.use(VueLazyload, {
  error: require(../error.png),
  loading: require(../loading.gif)
});

文件中使用

<img v-lazy ="item.img"> // vue文件中将需要懒加载的图片:src 修改为 v-lazy

各种样式修改

// 样式修改
 img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }

插件地址
https://github.com/hilongjw/vue-lazyload

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容