Rumah > hujung hadapan web > tutorial js > 图片加载完毕前显示加载圈的效果

图片加载完毕前显示加载圈的效果

php中世界最好的语言
Lepaskan: 2018-03-23 14:00:25
asal
2607 orang telah melayarinya

这次给大家带来图片加载完毕前显示加载圈的效果,图片加载完毕前显示加载圈的注意事项有哪些,下面就是实战案例,一起来看一下。

如下所示:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<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>

Salin selepas log masuk

以下为纯js代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!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.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

    img.src = newImg.src

   }

  }

 </script>

</body>

</html>

Salin selepas log masuk

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

推荐阅读:

datepicker插件监听输入框

小程序使用.getImageInfo()获取图片信息

Atas ialah kandungan terperinci 图片加载完毕前显示加载圈的效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan