【vue】图片加载动画效果

最新推荐文章于 2024-05-24 12:57:57 发布

KatyLight

最新推荐文章于 2024-05-24 12:57:57 发布

阅读量1.6k

点赞数 2

分类专栏：样式插件 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_33014695/article/details/126932522

版权

样式同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

插件

29 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

加载后，一种是图片由浅到深。一种是闪光加载效果消失。

<template>
  <img
      crossorigin="anonymous"
      :src="imgSrc"
      :class="[loading?'loading':'','kl-image-load']"
      @error="imgError"
      @load="imgLoad"
      :alt="imgAlt"/>
</template>
<script>
import {ref, watch} from "vue";

export default {
  name: "ImageLoad",
  props: {
    imgSrc: {
      default: "https://img1.baidu.com/it/u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
    },
    imgAlt: {
      default: "图片加载失败"
    },
    width:{
      default:'auto'
    },
    height:{
      default:'auto'
    }
  },
  setup(props, ctx) {
    const loading = ref(true)
    watch(props.imgSrc, (c, v) => {
      loading.value = true;
    })
    const imgError = () => {
      // loading.value=false;
    }
    const imgLoad = () => {
      loading.value = false;
    }
    return {
      imgLoad,
      imgError,
      loading
    }
  }

}
</script>

<style scoped>
.kl-image-load {
  max-width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.kl-image-load {
  opacity: 1;
  transition: opacity 1s ease-in;
}
.kl-image-load.loading{
  opacity: 0;
  transition: opacity 1s ease-in;
}
.kl-image-load.loading{
  height: 100px;
  width: 100%;
}

</style>

<template>
<div class="kl-image-load-light-box">
  <img
      crossorigin="anonymous"
      :src="imgSrc"
      :class="[loading?'loading':'','kl-image-load-light']"
      @error="imgError"
      @load="imgLoad"
      :alt="imgAlt"/>
  <div
      :class="[loading?'show':'','kl-image-load-light-mask']"
  ></div>
</div>
</template>
<script>
import {ref, watch} from "vue";

export default {
  name: "ImageLoadLight",
  props: {
    imgSrc: {
      default: "https://img1.baidu.com/it/u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
    },
    imgAlt: {
      default: "图片加载失败"
    },
    width:{
      default:'100%'
    },
    height:{
      default:'auto'
    }
  },
  setup(props, ctx) {
    const loading = ref(true)
    watch(props.imgSrc, (c, v) => {
      loading.value = true;
    })
    const imgError = () => {
      // loading.value=false;
    }
    const imgLoad = () => {
      loading.value = false;
    }
    return {
      imgLoad,
      imgError,
      loading
    }
  }

}
</script>

<style scoped>
.kl-image-load-light-box{
  position: relative;
  display: inline-table;
  height: auto;
  width: auto;
}
.kl-image-load-light {
  max-width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.kl-image-load-light-mask{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: black;
  opacity: 0;
  transition: opacity 1s ease-in;
}
.kl-image-load-light-mask.show{
  opacity: 1;
  transition: opacity 1s ease-in;
}
.kl-image-load-light-mask::after {
  content: '';
  user-select: none;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, transparent 40%, #FFFFFF 50%, transparent 60%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: au 1s linear infinite;
}
@keyframes au {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

</style>