Der Effekt der Anzeige eines Ladekreises vor dem Laden des Bildes-js-Tutorial-php.cn

Der Effekt der Anzeige eines Ladekreises vor dem Laden des Bildes

php中世界最好的语言

Freigeben： 2018-03-23 14:00:25

Original

2547 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen den Effekt, wenn Bild den Ladekreis anzeigt, bevor das Bild geladen wird. Welche Vorsichtsmaßnahmen gibt es, wenn der Ladekreis angezeigt wird, bevor das Bild geladen wird? Das Folgende ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.

lautet wie folgt:

<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. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Datepicker-Plug-in überwacht das Eingabefeld

Das Applet verwendet .getImageInfo() zum Abrufen Bildinformationen

Das obige ist der detaillierte Inhalt vonDer Effekt der Anzeige eines Ladekreises vor dem Laden des Bildes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!