JavaScript の画像オンロード イベント
この記事では、JavaScript で .onload イベントを処理する方法について説明します。 画像がアップロードされたときに JavaScript を使用してアラート ボックスを作成する方法を学習します。
また、アラート ボックスを作成することで、JavaScript を使用して画像が読み込まれたかどうかを確認する方法についても説明します。
JavaScript の .onload イベント
.onload イベントは、オブジェクトがロードされたときにのみ発生します。 .onload イベントは主に要素本体内で使用され、Web ページが画像、スクリプト、CSS ファイルなどを含むすべてのコンテンツをロードした後にスクリプトを実行します。
使用するブラウザーを使用すると、画像、スクリプト、iframe などの外部リソースの読み込みを追跡できます。画像をアップロードするときに、画像がブラウザーのキャッシュに保存されると、onload イベントが発生します。
画像がキャッシュされているかどうかに関係なく、画像が読み込まれたときに表示される警告ボックスを作成するにはどうすればよいでしょうか?
画像で onload イベントが発生したときに、The image is loaded successfully というメッセージを表示する警告ボックスを作成する必要があります。 JavaScript と HTML を使用して、この問題に取り組むことができます。
JavaScript の image.onload イベント
JavaScript を使用して、画像が完全に読み込まれたかどうかを確認できます。 HTMLimageElement インターフェイスの complete 属性を使用します。
この属性は、画像が完全にアップロードされている場合は true を返し、それ以外の場合は false を返します。 JavaScript には naturalWidth と naturalHeight プロパティがあり、どちらも使用できます。
サンプル コードで .naturalWidth を使用しました。これは、画像が正常に読み込まれた場合は true を返し、そうでない場合は 0 を返します。
HTML コード:
<!DOCTYPE html>
<html>
<head>
<title>Onload event using Javascript</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using Javascript</h1>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar">
</body>
</html>
JavaScript コード:
window.addEventListener('load', event => {
var image = document.querySelector('img');
var isLoadedSuccessfully = image.complete && image.naturalWidth !== 0;
alert(isLoadedSuccessfully);
});
このコードを実行すると、true が返されます。これは、画像が正常に読み込まれたことを意味します。
こちら をクリックすると、上記のコード例のライブ デモを見ることができます。
HTML の image.onload イベント
JavaScript を使用したくない場合は、HTML 属性を使用して画像が読み込まれたかどうかを確認できます。 HTML では、onload および onerror 属性を使用できます。
HTML では、画像が正常にロードされると onload 属性が起動し、画像の読み込み中にエラーが発生すると onerror 属性が起動します。
次のコードでは、onload および onerror 属性を使用しました。 したがって、これらの属性の助けを借りて、画像が読み込まれたときに画像が正常に読み込まれましたというメッセージを表示する警告ボックスを作成できます。
画像の読み込み中にエラーが発生した場合、画像が読み込まれていませんというメッセージが表示されます。
HTML コード:
<!DOCTYPE html>
<html>
<head>
<title>Onload event using HTML</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using HTML </h1>
<p id="currentTime"></p>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar"
onload="javascript: alert('The image is loaded successfully')"
onerror="javascript: alert('Image is not loaded')" />
</body>
</html>
コードを実行すると、画像が正常に読み込まれましたという警告メッセージが表示されます。
ここ をクリックして、指定されたサンプル コードのライブ デモを表示します。
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn