jqueryはデフォルトの画像を設定します

Web デザインでは、ページのコンテンツを充実させ、ユーザー エクスペリエンスを向上させるために、ページに画像を挿入することが必要になることがよくあります。しかし、実際の開発では画像の読み込み失敗や存在しないなどの問題が必ず発生し、ページ上の空白の画像がユーザーの認識に影響を与えることもよくあります。この問題を解決するには、jQuery ライブラリを使用してデフォルトの画像を設定することでユーザー エクスペリエンスを向上させることができます。 jQuery を使用してデフォルトの画像を設定する方法を詳しく見てみましょう。

1. jQuery ライブラリをロードする

まず、HTML ファイルに jQuery ライブラリを導入する必要があります。コードは次のとおりです:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CDN メソッドが使用されますここではjQueryライブラリを紹介します もちろんローカルに導入することも可能です。

2. デフォルト画像の設定

次に、HTML ページにデフォルト画像を設定する必要があります。実際のプロジェクトでは、必要に応じて、適切なサイズと対応するコンテンツの画像をデフォルトの画像として設定できます。たとえば、次の HTML コードをコードに追加できます。

<img src="default.jpg" alt="默认图片">

ここのdefault.jpg は、設定したデフォルトの画像です。

3. jQuery を使用してデフォルト画像を設定する

次に、jQuery ライブラリを使用してデフォルト画像を設定する方法を見てみましょう。

1. 画像が正常にロードされたかどうかを検出する

まず、画像が正常にロードされたかどうかを検出する必要があります。画像の読み込みに成功すると画像自体が表示されますが、画像の読み込みに失敗した場合は前に設定したデフォルトの画像が使用されます。コードは次のとおりです。

$('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        $(this).attr('src', 'default.jpg');
    }
});

$('img') ここで、すべての画像を選択することを意味し、その each() メソッドは各要素を走査することを意味します。画像が正常に読み込まれない場合は、attr() メソッドを使用して、画像の src 属性を設定したデフォルトの画像に変更します。

2. イベント モニタリングを使用する

イベント モニタリングを使用して、イメージの読み込みの成功と失敗を認識することもできます。コードは次のとおりです:

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

ここの $ ('img') は、すべての画像を選択し、on() メソッドを使用して画像のエラー イベントをリッスンすることを意味します。イベントがトリガーされたら、attr() メソッドを使用して、画像の src 属性を設定したデフォルトの画像に変更します。

上記の両方の方法を使用できますが、2 番目の方法は画像の読み込み中にエラーが発生した場合にのみ実行する必要があることに注意してください。一方、最初の方法は画像が読み込まれる前に実行できます。 . デフォルトの画像を設定します。

4. まとめ

ここまでで、jQuery を使用してデフォルト画像を設定する操作が完了しました。このようにして、画像の読み込みエラーが発生した場合でも、ユーザー エクスペリエンスをより適切に保証し、ページをより完全で美しいものにすることができます。実際のプロジェクトでは、ニーズや特定の状況に応じて、この方法を柔軟に使用して、Web サイトのユーザー エクスペリエンスを向上させることができます。

以上がjqueryはデフォルトの画像を設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。