vue画像の読み込みが完了する前に読み込みエフェクトを追加する

今回は、読み込みが完了する前の vuepictures の読み込みエフェクトについて説明します。 vue 画像が読み込まれる前に読み込みエフェクトを追加するための 注意事項 は何ですか。以下は実際的なケースです。

は次のようになります:

<template>
 <img  src="/static/imghwm/default1.png" data-src="url" class="lazy" alt="vue画像の読み込みが完了する前に読み込みエフェクトを追加する" >
</template>
<script>
 export default {
  props: [&#39;src&#39;], // 父组件传过来所需的url
  data() {
   return {
    url: &#39;http://www.86y.org/images/loading.gif&#39; // 先加载loading.gif
   }
  },
  mounted() {
   var newImg = new Image()
   newImg.src = this.src
   newImg.onerror = () => { // 图片加载错误时的替换图片
    newImg.src = &#39;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&#39;
   }
   newImg.onload = () => { // 图片加载成功后把地址给原来的img
    this.url = newImg.src
   }
  }
 }
</script>

以下は純粋な JS コードです​​

nbsp;html>


 <meta>
 <title>loading</title>


 <img  alt="vue画像の読み込みが完了する前に読み込みエフェクトを追加する" >
 <script>
  window.onload = () => {
   var img = document.querySelector(&#39;#img&#39;);
   img.src = &#39;http://www.86y.org/images/loading.gif&#39;; // 先加载loading.gif
   var newImg = new Image();
   newImg.src = &#39;https://avatars3.githubusercontent.com/u/1?v=3&#39;;
   newImg.onerror = () => { // 图片加载错误时的替换图片
    newImg.src = &#39;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&#39;;
   }
   newImg.onload = () => { // 图片加载成功后把地址给原来的img
    img.src = newImg.src
   }
  }
 </script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue はページ読み込みの進行状況バーを実装します

vue better-scroll スクロール プラグインの使用方法の詳細な説明

以上がvue画像の読み込みが完了する前に読み込みエフェクトを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。