[解決済み】jQueryで画像が読み込まれたかどうか(エラーにならないか)確認する。
質問
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"))
;
これが役立つといいのですが
関連
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] ページロード後にJavaScriptを実行させるには?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み] jQuery に何かを実行する前にすべての画像の読み込みを待つように指示する公式な方法