vue画像の読み込みが完了する前に読み込みエフェクトを追加する
今回は、読み込みが完了する前の 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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7456
15
1376
52
77
11
14
9
Vueでグローバルローディングエフェクトを実装する方法
Jun 11, 2023 am 09:05 AM
フロントエンド開発では、Web ページとの対話中にユーザーがデータがロードされるまで待機する必要があるシナリオがよくありますが、このとき、通常はユーザーに待機を促すためにロード効果が表示されます。 Vue フレームワークでは、グローバルローディングエフェクトの実装は難しくありませんので、その実装方法を紹介します。ステップ 1: Vue プラグインを作成する すべての Vue インスタンスで参照できる、loading という名前の Vue プラグインを作成できます。プラグインでは、次の 2 つのメソッドを実装する必要があります。
くぼみの中で失われた宝箱を見つける方法
Jan 22, 2024 pm 05:30 PM
ゼロゾーンの洞窟で失われた宝箱を取り戻すにはどうすればよいですか？このダンジョンにはたくさんの箱がありますが、あちこちに箱が点在しているため、見つけられない人も多いと思いますが、すぐに箱を見つけてダンジョンをクリアする方法を紹介します。デッドゾーンの穴に失われた宝箱を取り戻すタスクを完了するにはどうすればよいですか? ロープネットにコミッションポストが表示されます; 具体的な分析: 1. まずロープネットに行き、コミッションポストを見ることができます [回収]穴に落ちた宝箱] を選択し、メッセージを送信を選択します。 2.交換と交換の後、この委託タスクを受け取ることができ、その後、この練習を開始できます。 3. 次に、このミッションのロックを解除するには穴に入る必要があります。 4. その後、洞窟泥棒から依頼を受け、大量のギアコインを入手できます。 5. 穴から抜け出す必要がある
次元を増やすために一般的に使用される numpy メソッドと注意事項
Jan 26, 2024 am 08:38 AM
Numpy は、Python で一般的に使用される科学計算ライブラリであり、豊富な数学関数と強力な配列演算関数を提供します。実際のアプリケーションでは、配列の次元を拡張または調整する必要がある場合があります。この記事では、numpy で次元を増やす一般的に使用される方法を紹介し、詳細なコード例を示します。 1. reshape メソッドを使用する numpy の reshape メソッドを使用すると、配列の要素数を変更せずに配列の次元を変更できます。具体的な使用方法は次のとおりです。
安全ヘルメットの普遍的な安全ゾーンを実現する方法
Jan 24, 2024 pm 02:36 PM
究極のゼロユニバーサル安全ヘルメットを完成させるにはどうすればよいでしょうか?このミッションを実行するには、事前のミッションを受ける必要があり、実際には、黒岩建設現場の古い場所に行ってミッションを受け取る必要がありますが、どうすれば完了できますか?以下のエディターで見てみましょう。 JueZuo で全能のヘルメットを完成させる方法 1. Black Goose 建設現場の古い場所に行き、ここで Tietou を見つけて会話する必要があります。 2. 会話後、ピット内のセメント袋に行くと、ヘルメット担当が3人いて、ここでヘルメットを借りることができます。 3. その後、慎重な作業員を見つけて会話する必要があり、会話が完了したらアイアンヘッドを探しに戻ります。 4.最後にTietouと会話してタスク完了です。上記は、究極のゼロ全能のヘルメットを完成させる方法に関する情報です。
Vue でグローバルな読み込みエフェクトを実装する方法
Nov 07, 2023 am 09:18 AM
Vue でグローバル Loading エフェクトを実装する方法 Vue 開発では、グローバル Loading エフェクトを実装することが一般的な要件です。グローバルな読み込み効果により、ページが読み込まれていることをユーザーに知らせる適切なプロンプトが表示され、ユーザー エクスペリエンスが向上します。この記事では、Vue でグローバルな読み込み効果を実装する方法を紹介し、具体的なコード例を示します。グローバル Loading コンポーネントを作成する まず、グローバル Loading コンポーネントを作成する必要があります。このコンポーネントは単純なものにすることができます
WeChatの紅蒙版適応作業が間もなく完了、Huawei Mate70が発売される可能性がある
Aug 23, 2024 pm 09:31 PM
最新のニュースでは、ファーウェイの純血HongmengシステムであるHarmonyOSNextのWeChat対応作業のほとんどが完了し、正式版がまもなくユーザーに提供される予定であると報告されています。さらに、WeChat に加えて、他の Tencent ベースのモバイル アプリケーションも適応しつつあります。 WeChatは現段階でほとんどの適応作業を基本的に完了していると関係者らは、ミニプログラムなどのWeChat機能はまだ待つ必要があると述べた。すべてがうまくいけば、純血の紅蒙が正式にデビューすると、ユーザーは直接WeChatを使用できるようになります。 Yu Chengdong氏の以前の声明によると、Huaweiは今年の第4四半期に純血Hongmengシステムを発売し、それまでにHuawei Mate70シリーズが発売され、WeChatもそれまでに正式に発表される予定です。さらに、一部の報道によると、Hongmeng バージョンの WeChat には、WeChat の一部のコア機能のみが含まれる簡易バージョンである可能性があります。
MongoDB を使用してデータを追加、変更、削除する方法
Sep 20, 2023 pm 02:53 PM
MongoDB を使用してデータを追加、変更、削除する方法 MongoDB は、高いパフォーマンス、スケーラビリティ、柔軟性を備えた人気のあるオープン ソース NoSQL データベースです。 MongoDB を使用してデータを保存する場合、多くの場合、データを追加、変更、削除する必要があります。以下は、MongoDB を使用してこれらの機能を実装するための具体的なコード例です。 データベース接続: まず、MongoDB データベースに接続する必要があります。 Python では、これは pymongo ライブラリを使用して実現できます。
マッキンゼー: 人工知能の適用率は 2022 年に 2 倍になる
Oct 10, 2023 pm 02:21 PM
顧客を自動的に追従するショッピングカートや、人間よりも早くキュウリを収穫できるロボットは、見出しを飾る可能性が高いですが、最も注目を集めている人工知能や機械学習テクノロジーの応用は、舞台裏で見られないことがよくあります。ますます多くの組織が、文書処理、データ入力、従業員のオンボーディング、ワークフローの自動化などのバックオフィス プロセスに AI や機械学習を活用したツールを適用し始めており、大幅な効率の向上が見られています。自動化によってバックオフィスの生産性を向上できることは何十年も前から明らかですが、高度な人工知能と機械学習ツールの出現により、ヘルスケアなどの高度に規制された業界を含め、自動化が達成できる内容に大きな変化がもたらされました。 (出典: AI Generated) 「これまで、人工知能は複雑なものと考えられていました。
