Home Web Front-end JS Tutorial Add loading effect before vue image loading is completed

Add loading effect before vue image loading is completed

Apr 12, 2018 pm 05:29 PM
loading Increase Finish

This time I will bring you vuepicturesIncrease the loading effect before the loading is completed, and increase the loading effect before the vue image is loaded.What are the precautions, the following is the actual combat Let’s take a look at the case.

is as follows:

<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>
Copy after login

The following is pure js code

<!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>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Vue implements the progress bar of page loading

Detailed explanation of the use of vue better-scroll scrolling plug-in

The above is the detailed content of Add loading effect before vue image loading is completed. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to implement global loading effect in Vue How to implement global loading effect in Vue Jun 11, 2023 am 09:05 AM

How to implement global loading effect in Vue

Commonly used numpy methods and precautions to increase dimensions Commonly used numpy methods and precautions to increase dimensions Jan 26, 2024 am 08:38 AM

Commonly used numpy methods and precautions to increase dimensions

How to increase the number of undo steps in PPT documents How to increase the number of undo steps in PPT documents Mar 26, 2024 pm 02:30 PM

How to increase the number of undo steps in PPT documents

How to use MongoDB to add, modify, and delete data How to use MongoDB to add, modify, and delete data Sep 20, 2023 pm 02:53 PM

How to use MongoDB to add, modify, and delete data

How to add a new column in dedecms? How to add a new column in dedecms? Mar 14, 2024 pm 01:51 PM

How to add a new column in dedecms?

How to realize the universal safety zone of the safety helmet How to realize the universal safety zone of the safety helmet Jan 24, 2024 pm 02:36 PM

How to realize the universal safety zone of the safety helmet

McKinsey: Artificial Intelligence application rate will double in 2022 McKinsey: Artificial Intelligence application rate will double in 2022 Oct 10, 2023 pm 02:21 PM

McKinsey: Artificial Intelligence application rate will double in 2022

How to find a lost treasure chest in a hollow How to find a lost treasure chest in a hollow Jan 22, 2024 pm 05:30 PM

How to find a lost treasure chest in a hollow

See all articles