画像を表示する必要がある 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. 画像が存在しない状況の処理
画像が存在しないことが検出された場合、次の方法で処理できます。 #デフォルトの画像を表示
画像の読み込み失敗のプロンプトを表示
画像の読み込みが失敗した場合に、現在表示されている画像が失敗したことをユーザーに知らせるために、画像の場所にプロンプト テキストを表示することもできます。ロードします。コードは次のとおりです:$('img').on('error', function() {
$(this).attr('src', 'default.jpg');
});要素を追加し、画像の読み込み失敗に対するプロンプト テキストを表示します。
画像コンテナを非表示にする
画像が存在しない場合は、そのコンテナ ($('img').on('error', function() {
$(this).after('<p class="load-error">图片加载失败</p>');
});以上がjqueryで画像が存在するか確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
