1. ホーム
  2. ジャバスクリプト

[解決済み】jQueryで画像が読み込まれたかどうか(エラーにならないか)確認する。

2022-04-01 20:14:13

質問

jQueryライブラリのJavaScriptを使って、順番なしリストに含まれる画像のサムネイルを操作しています。画像が読み込まれるとある処理を行い、エラーが発生すると別の処理を行います。私はjQueryを使用しています load()error() メソッドをイベントとして扱います。 これらのイベントの後、image DOM要素の.completeをチェックして、jQueryがイベントを登録する前に画像がすでにロードされていないことを確認します。

jQueryがイベントを登録する前にエラーが発生した場合を除き、正常に動作します。 唯一思いつく解決策は、img onerror 属性を使用して、失敗したというフラグをグローバルに(またはノード自体に)保存し、jQueryが.completeをチェックするときにその"store/node"を確認できるようにします。

どなたか良い解決策をご存知ですか?

編集:要点を太字にし、以下に詳細を追加しました。 私は、画像のロードとエラーのイベントを追加した後に、画像が完了したかどうか(ロードされたかどうか)チェックしています。そうすることで イベントが登録される前に画像が読み込まれたとしても、私はそれを知ることができます。 もし、イベントの後に画像がロードされなければ、ロードされたときにイベントが対処してくれるでしょう。この場合の問題は、画像がすでにロードされているかどうかを簡単にチェックできることですが 代わりにエラーが発生したかどうかがわからない。

解決方法は?

もう一つの方法は onload および onerror イベントは、インメモリ画像要素を作成し、その要素に src 属性に、元の src 属性で指定します。 以下はその例です。

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

これが役立つといいのですが