ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryは画像が読み込まれた後にコードを実行します
<span>$('#myImage').attr('src', 'image.jpg').load(function() { </span> <span>//run code </span> <span>alert('Image Loaded'); </span><span>});</span>
jquery .load()イベントは、画像などの要素がウェブページに完全にロードされている場合に特定の関数をトリガーする強力なツールです。このイベントは、画像が完全にロードされた後にのみ特定のアクションを実行したい場合に特に役立ちます。たとえば、画像が完全にロードされるまでロードアニメーションを表示し、アニメーションを非表示にすることをお勧めします。 .load()イベントによりこれが可能になります。 .load()イベントは、すべてのブラウザのすべての要素と一貫して動作しないことに注意することが重要です。画像のようなSRC属性を持つ要素で最適に動作します。
jQueryの.load()イベントを使用して、画像がロードされたときに検出できます。簡単な例は次のとおりです:
$( 'img')。発砲。一般的な理由の1つは、ターゲットを絞っている画像がスクリプトが実行される前にすでにロードされていることです。これは、スクリプトがHTMLドキュメントのヘッドにあり、画像がボディにある場合に発生する可能性があります。これを回避するために、ボディの最後にスクリプトを配置するか、$(document).ready()関数を使用して、ページ全体が読み込まれた後にのみスクリプトが実行されるようにします。ただし、.load()イベントは、すべてのブラウザのすべての要素と一貫して動作しないことに注意することが重要です。画像のような要素で最適に機能します。
jquery?
//ここにコード
});はい、キャッシュされた画像で.load()イベントを使用することができます。ただし、画像がキャッシュされている場合、スクリプトが実行される前にロードされる可能性があることに留意してください。これを処理するために、.completeプロパティを使用して画像が完了しているかどうかを確認できます。完了した場合は、すぐに機能を実行できます。それ以外の場合は、.load()イベントを使用できます。
。 .promise()メソッドは、コレクションにバインドされた特定のタイプのすべてのアクションがキューに縛られているかどうかを解決する約束を返します。 .load()イベントは、AJAX要求が完了するたびに関数を実行するために使用できます。これは、サーバーからデータがロードされた後にアクションを実行する場合に役立ちます。
。これにより、Ajax要求がサーバーに送信され、選択された要素にデータをロードします。
以上がjQueryは画像が読み込まれた後にコードを実行しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。