ホームページ > ウェブフロントエンド > jsチュートリアル > コールバックを使用して JavaScript で画像の読み込みを処理するにはどうすればよいですか?

コールバックを使用して JavaScript で画像の読み込みを処理するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-05 00:07:14
オリジナル
609 人が閲覧しました

How Can I Use Callbacks to Handle Image Loading in JavaScript?

コールバックを使用した JavaScript での画像のロード

画像を操作する場合、多くの場合、いつロードが完了したかを知る必要があります。これにより、画像の表示やさらなる処理など、画像の状態に基づいたアクションを実行できるようになります。

コールバック メソッド

JavaScript では、次の一般的なアプローチの 1 つが、画像の読み込みを処理するには、コールバック関数を使用します。コールバックは、画像が完全に読み込まれるなど、特定のイベントが発生したときに呼び出される関数です。

画像要素の .complete プロパティは、その読み込みステータスを示します。画像がすでにロードされている場合は、コールバック関数を直接呼び出すことができます。それ以外の場合は、「onload」イベント リスナーをイメージにアタッチできます。

例を次に示します:

var img = document.querySelector('img');

function loaded() {
  alert('loaded');
}

if (img.complete) {
  loaded();
} else {
  img.addEventListener('load', loaded);
  img.addEventListener('error', function() {
    alert('error');
  });
}
ログイン後にコピー

出典: http://www.html5rocks.com/en/tutorials/ es6/promises/

このアプローチを活用すると、イメージの読み込みステータスを確実に判断し、提供されたコールバック関数。

以上がコールバックを使用して JavaScript で画像の読み込みを処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート