JavaScript を使用して画像がロードされているかどうかを判断する 3 つの方法_JavaScript スキル

フロントエンド開発作業では、画像情報を取得するために、画像のロード後に画像のサイズを正確に取得し、対応するコールバック関数を実行して画像に特定の表示効果を生成する必要がある場合があります。この記事では主に、画像の読み込みを判断する一般的な JavaScript メソッドをいくつか整理し、コードと実践的なアプリケーションを組み合わせて説明します。

オンロードメソッド

img タグに onload 属性を追加し、対応する関数を入力して、後続の javascipt コードを実行します。次のコード例では、img 要素はデフォルトでは表示されません。読み込みの完了後に画像が表示されるかどうかを決定するために Onload が使用されます。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数 get(ts){
ts.style.display = 'block' //画像を表示します
; }

利点: JavaScript コード部分はページの任意の部分に配置して読み込むことができ、ほとんどの画像で使用できます。使い方は比較的簡単で、理解しやすいです。

欠点: onlaod 属性を各タグに付加する必要がありますが、HTML コードを直接操作できない場合やコードの簡素化が必要な場合には適用されません

javascipt ネイティブ メソッド

指定された ID を持つイメージを選択し、onload を通じてコールバック メソッドを指定します。イメージがロードされると、「イメージのロードが完了しました」というメッセージが表示されます。

コードをコピー コードは次のとおりです:

<スクリプト言語="JavaScript">
Document.getElementById("pic1").onload = function () {
alert("画像の読み込みが完了しました");
}

利点: シンプルで使いやすく、HTML コードに影響を与えません。

欠点: 指定できる要素は 1 つだけであり、javascipt コードは image 要素の下に配置する必要があります

jquery メソッド

クラス pic1 を使用して各画像要素にイベントをバインドし、jquery のloadメソッドを使用して要素を徐々に表示します。

$(document).ready() でロード イベントをバインドしないでください。

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})

利点: HTML コードのコンテンツに影響を与えることなく、要素イベントをバッチでバインドできます

欠点: jquery ライブラリのサポートが必要であり、操作する必要がある要素の下にコードを配置する必要があります。