フロントエンド開発作業では、画像情報を取得するために、画像のロード後に画像のサイズとサイズを正しく取得し、対応するコールバック関数を実行して画像を特定のディスプレイ効果を作成する必要があります。この記事では、主に画像読み込みの完了を判断するためのいくつかの一般的な方法を整理し、コードと実用的なアプリケーションの組み合わせを通じて説明して説明します。
オンロードメソッド
IMGタグにOnload属性を追加し、対応する関数に記入して、後続のJavaSciptコードを実行します。次のコードの例では、IMG要素はデフォルトでは表示されません。荷重が完了した後に画像が表示されることをオンロードによって決定されます。
コードコピーは次のとおりです。
<img onload = "get（this）" src = "..." style = 'display：none' />
<script type = "text/javascript">
関数get（ts）{
tstyle.display = 'block'; //写真を表示します
}
</script>
利点：JavaScriptコードセクションは、ページの任意の部分に配置してロードでき、ほとんどの任意の画像で使用できます。使用は比較的簡単で、理解しやすいです。
短所：onlaod属性は各タグに投稿する必要がありますが、HTMLコードを直接操作できない場合、またはコードを簡素化する必要がある場合には適用できません。
JavaSciptネイティブメソッド
指定されたIDを使用して画像を選択し、Onloadを介してコールバックメソッドを指定し、「画像の読み込みが完了した」という単語が表示された後にポップアップします。
コードコピーは次のとおりです。
<img id = "pic1" src = "..." />
<スクリプト言語= "javascript">
document.getElementById（ "pic1"）。onload = function（）{
アラート（ "画像読み込みが完了しました"）;
}
</script>
利点：HTMLコードに影響を与えることなく、シンプルで使いやすい。
短所：1つの要素のみを指定でき、Javasciptコードを画像要素の下に配置する必要があります
jQueryメソッド
クラスPIC1を使用した各画像要素バインディングイベントについて、要素はjQueryの負荷方法を介して徐々に表示されます。
ロードイベントを$（document）.ready（）でバインドしないでください。
コードコピーは次のとおりです。
<script type = "text/javascript">
$（function（）{
$（'。pic1 '）。各（function（）{
$（this）.load（function（）{
$（this）.fadein（）;
}）;
}）;
}）
</script>
利点：要素イベントはバッチにバインドでき、HTMLコードコンテンツには影響しません
短所：jQueryライブラリのサポートが必要であり、コードを操作する必要がある要素の下にコードを配置する必要があります。