jqueryで画像が存在するか確認する方法

画像を表示する必要がある Web サイトの場合、画像のパスをデータベースまたは API を通じて返されるデータに保存する場合があります。ページ上に画像を表示する必要がある場合、画像が存在しない状況に遭遇することがありますが、この場合、ページ上に空白の画像が表示されると、ユーザーに不快感を与えます。ユーザー エクスペリエンスを向上させるために、jQuery を使用して画像が存在するかどうかを確認し、それに応じて処理することができます。

1. jQuery を使用して画像が存在するかどうかを確認する

.load() メソッドを使用して、画像が正常に読み込まれたかどうかを検出できます。 .load() メソッドは、選択した要素の読み込みが完了するとイベントをトリガーします。画像が正常に読み込まれると、load イベントがトリガーされます。そうでない場合は、以下に示すように、エラー イベントがトリガーされます:

$('img').on('load', function() {
  console.log('Image is loaded');
}).on('error', function() {
  console.log('Image is not loaded');
});

上の例では、最初にすべての画像要素を選択し、次にリッスンします。ロードイベントとエラーイベントに、画像が正常にロードされた場合は「画像がロードされています」を出力し、それ以外の場合は「画像がロードされていません」を出力します。

2. 画像が存在しない状況の処理

画像が存在しないことが検出された場合、次の方法で処理できます。 #デフォルトの画像を表示

1. 画像が存在しない場合、Web サイト内の各画像にデフォルトの「画像なし」画像を追加できます。画像が存在しないことが検出された場合、picture 要素の src 属性を変更することでデフォルトの画像を表示できます。コードは次のとおりです。画像が存在しない場合は、src 属性を default.jpg に変更して、デフォルトの画像を表示します。

画像の読み込み失敗のプロンプトを表示

画像の読み込みが失敗した場合に、現在表示されている画像が失敗したことをユーザーに知らせるために、画像の場所にプロンプ​​ト テキストを表示することもできます。ロードします。コードは次のとおりです:

$('img').on('error', function() {
  $(this).attr('src', 'default.jpg');
});

2. 上記のコードでは、.after() メソッドを使用して image 要素の後に

   要素を追加し、画像の読み込み失敗に対するプロンプト テキストを表示します。

画像コンテナを非表示にする

画像が存在しない場合は、そのコンテナ (

要素など) を非表示にして、ページ レイアウトをより美しくすることもできます。 。コードは次のとおりです。

$('img').on('error', function() {
  $(this).after('<p>图片加载失败</p>');
});

3. 上記のコードでは、画像が存在しないことが検出された場合、 .parent() メソッドを使用して現在の画像の親要素を選択し、 .hide() メソッドを使用して非表示にします。

3. まとめ

今回は、jQueryを使って画像の存在を確認し、適切に処理する方法を紹介しました。画像が存在しない状況に対処する場合、実際のニーズに応じてデフォルトの画像を表示したり、コンテンツを表示したり、コンテナを非表示にしたりして、ユーザー エクスペリエンスとページ レイアウトを向上させることができます。

以上がjqueryで画像が存在するか確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。