ホームページ > 記事 > ウェブフロントエンド > 画像がロードされる前にローディングサークルを表示する効果
画像がロードされる前にローディングサークルを表示する効果
- php中世界最好的语言オリジナル
- 2018-03-23 14:00:252486ブラウズ
今回は、画像がロードされる前にローディングサークルを表示する画像の効果について説明します。画像がロードされる前にローディングサークルを表示する場合の注意事項は何ですか?実際のケースを見てみましょう。 。
は次のとおりです:
<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 サイトにあります。
推奨読書:
アプレットは .getImageInfo() を使用して画像情報を取得します
以上が画像がロードされる前にローディングサークルを表示する効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。