vue图片懒加载

最新推荐文章于 2024-02-02 17:14:44 发布

一只豹子(ง •̀_•́)ง

最新推荐文章于 2024-02-02 17:14:44 发布

阅读量158

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_42183089/article/details/105859665

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload,{
  error:'./static/resources/1.jpg',
  loading:'./static/resources/2.gif',
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
})

index.vue

<template>
  <div class="index">
    <div>
      <span class="text">图片懒加载测试</span>
    </div>
    <div class="imgBox">
      <div class="imgItem"><img class="w100Pct" v-lazy="imgPath1" /></div>
      <div class="imgItem"><img class="w100Pct" v-lazy="imgPath2" /></div>
      <div class="imgItem"><img class="w100Pct" v-lazy="imgPath3" /></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgPath1: "/static/resources/5.jpg", //图片在static文件夹下面
      imgPath2: "/static/resources/3.jpg",
      imgPath3: "/static/resources/4.jpg"
    };
  }
};
</script>

<style lang="scss" scoped>
img[lazy="loading"] {
  // 加载中图片样式
  width: 32px !important;
  height: 32px !important;
}
img[lazy="error"] {
  // error图片样式
}
img[lazy="loaded"] {
  // 已加载图片样式
}

// sass 定义的变量
$w100Pct: 100%;
$h100Pct: 100%;

.index {
  width: 1200px;
  height: 600px;
}
// sass样式嵌套
.imgBox {
  width: $w100Pct;
  height: $h100Pct;
  background-color: #a51;
  .w100Pct {
    width: $w100Pct;
    height: $h100Pct;
  }
  .imgItem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $w100Pct;
    height: $h100Pct;
  }
}
</style>

资源文件(图片)在static下