Fügen Sie den Ladeeffekt hinzu, bevor das Laden des Vue-Bildes abgeschlossen ist-js-Tutorial-php.cn

Fügen Sie den Ladeeffekt hinzu, bevor das Laden des Vue-Bildes abgeschlossen ist

php中世界最好的语言

Freigeben： 2018-04-12 17:29:09

Original

8647 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen VueBilderum einen Ladeeffekt hinzuzufügen, bevor der Ladevorgang abgeschlossen ist. Was sind die Vorsichtsmaßnahmenum einen Ladeeffekt hinzuzufügen, bevor das Vue-Bild geladen wird? Folgendes ist der eigentliche Kampf. Werfen wir einen Blick auf den Fall.

sieht so aus:

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

Nach dem Login kopieren

Das Folgende ist reiner 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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue implementiert den Fortschrittsbalken beim Laden der Seite

Detaillierte Erläuterung der Verwendung des Scroll-Plugins von Vue Better-Scroll -in

Das obige ist der detaillierte Inhalt vonFügen Sie den Ladeeffekt hinzu, bevor das Laden des Vue-Bildes abgeschlossen ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!