今回は、読み込みが完了する前の vuepictures の読み込みエフェクトについて説明します。 vue 画像が読み込まれる前に読み込みエフェクトを追加するための 注意事項 は何ですか。以下は実際的なケースです。
は次のようになります:
<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>
以下は純粋な JS コードです
<!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>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
vue better-scroll スクロール プラグインの使用方法の詳細な説明
以上がvue画像の読み込みが完了する前に読み込みエフェクトを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。