Ajouter un effet de chargement avant que le chargement de l'image vue ne soit terminé-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Ajouter un effet de chargement avant que le chargement de l'image vue ne soit terminé

Apr 12, 2018 pm 05:29 PM

loading Augmenter Finition

Cette fois, je vous apporte vueimagespour ajouter un effet de chargement avant que le chargement ne soit terminé, quelles sont les précautionspour ajouter un effet de chargement avant que l'image de vue ne soit chargée, les suivantes est le combat réel. Jetons un coup d'œil au cas.

ressemble à ceci :

&lt;template&gt;
 &lt;img :src=&quot;url&quot;&gt;
&lt;/template&gt;
&lt;script&gt;
 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 = () =&gt; { // 图片加载错误时的替换图片
    newImg.src = 'https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1489486509807&amp;di=22213343ba71ad6436b561b5df999ff7&amp;imgtype=0&amp;src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'
   }
   newImg.onload = () =&gt; { // 图片加载成功后把地址给原来的img
    this.url = newImg.src
   }
  }
 }
&lt;/script&gt;

Copier après la connexion

Ce qui suit est du code js pur

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;title&gt;loading&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;img id=&quot;img&quot;&gt;
 &lt;script&gt;
  window.onload = () =&gt; {
   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 = () =&gt; { // 图片加载错误时的替换图片
    newImg.src = 'https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1489486509807&amp;di=22213343ba71ad6436b561b5df999ff7&amp;imgtype=0&amp;src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg';
   }
   newImg.onload = () =&gt; { // 图片加载成功后把地址给原来的img
    img.src = newImg.src
   }
  }
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Vue implémente la barre de progression du chargement des pages

Explication détaillée de l'utilisation du plug de défilement de vue better-scroll -dans

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn