vue图片加载完成前增加loading效果

这次给大家带来vue图片加载完成前增加loading效果，vue图片加载完成前增加loading效果的注意事项有哪些，下面就是实战案例，一起来看一下。如下所示：123456789101112131415161718...

I-T枭

9142人浏览 · 2019-05-07 23:27:50

I-T枭 · 2019-05-07 23:27:50 发布

这次给大家带来vue图片加载完成前增加loading效果，vue图片加载完成前增加loading效果的注意事项有哪些，下面就是实战案例，一起来看一下。

如下所示：

<template>

<img :src="url">

</template>

<script>

export default {

props: ['src'], // 父组件传过来所需的url

data() {

return {

url: 'http://www.86y.org/images/loading.gif' // 先加载loading.gif

}

},

mounted() {

var newImg = new Image()

newImg.src = this.src

newImg.onerror = () => { // 图片加载错误时的替换图片

newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'

}

newImg.onload = () => { // 图片加载成功后把地址给原来的img

this.url = newImg.src

}

</script>

以下为纯js代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>loading</title>

</head>

<body>

<img id="img">

<script>

window.onload = () => {

var img = document.querySelector('#img');

img.src = 'http://www.86y.org/images/loading.gif'; // 先加载loading.gif

var newImg = new Image();

newImg.src = 'https://avatars3.githubusercontent.com/u/1?v=3';

newImg.onerror = () => { // 图片加载错误时的替换图片

}

newImg.onload = () => { // 图片加载成功后把地址给原来的img

img.src = newImg.src

}

</script>

</body>

</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^