コールバックを使用した 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 サイトの他の関連記事を参照してください。