jQuery('img').bind('error',function(){
alert('hi');
jQuery(this).hide();
});
私はこのコードを書いていますが、利用できない画像は隠れておらず、まだ十字記号が表示されています。誰でも間違っている可能性があることを指摘することはできますか？私はdocument.readyの下でこれを書いているし、window.onloadの下でも試してみた。イメージがsrcの場所に見つからない場合、イメージを非表示にしたいですか？
問題は、エラーイベントをバインドするときに、イメージのエラーが既に発生しているようです。イベントをバインドした後、img.srcをリセットすることで、再度起動することができます。以下はIE8、FF、Chromeで動作しました。
$('img').error(function(){
alert('hi');
$(this).hide();
});
$('img').each(function() { this.src = this.src; });
jsFiddleはここにある：http://jsfiddle.net/7cnQN/
うわー、良い考え。しかし、これは正しく読み込まれたイメージをリロードします。イメージの数とキャッシュ設定の方法によって、読み込み時間が長くなる可能性があります。 –
@Barlow - 私は完全に同意します。私はそれが素晴らしいアイデアだとは思っていなかったことを明確にしておくべきでしたが、なぜイベントが発射されなかったのかをより説明しました。適切なキャッシュ・ディレクティブがある場合は、ローカル・ブラウザのキャッシュからリロードする必要があります。それらがなければ、イメージごとに別のサーバー往復を見て、変更されていないことを確認しています。 –
Geniusは私が推測する正しい言葉でしょう。それは私の問題のおかげで解決しました。ここで何が起きているのかをもう少し説明すれば素晴らしいだろう。 –
jQuery(document).ready()とjQuery(window).onload()の両方では、imgには既にエラーが発生しているため、エラーにバインドしています。試してみてください：
jQuery('img').live('error',function(){
alert('hi');
jQuery(this).hide();
});
jQuery（document）.ready（）;
私はまだこのコードを試していません（そしてしばらく時間がありません）。
私はこれも試してみました。 –
私は個人的にJQueryに問題があります.JQueryはJavaScriptのネイティブ機能を探している人たちを止めるようです。 .error()ドキュメントはこの番組で（テストされていない）
myimage.onerror = function() { this.style.visibility = 'hidden'; }
jQueryは基本的な機能の多くをはるかに機能的なスタイルにカプセル化し、非常に良い方法で多くのことを行います。それを使用する選択は、機能セットの必要性に基づいて行う必要があります。上記のようなエラーハンドラが必要な場合は、不要と思われます。あなたのコードとBarlow Tuckersがほぼ同じことを達成するため、 – Orbling
@Orbling lol、アラートは元のコードからコピーされました。すべての画像にバインドされず、 'visible：hidden;ではなく' display：none; 'を実行します（' alert（） 'を無視します）。 –
私は、基本的な機能では、ネイティブのjavascriptを使う方が良いということに同意します。しかし、jQuery（または他のフレームワーク）が時間を節約し、読みやすさを向上させることは何度もあります。 –
例：
$("img").error(function(){
$(this).hide();
});
をしている...私は個人的にのonerrorイベント、例えばを使用します基本的にあなたがやっているのと同じです。 jQueryが読み込まれてページに表示されていることを確認できますか？また、FireFox、Chrome、Safariを使用している場合は、javascriptコンソールでエラーを確認してみてください。
EDIT：ドキュメントからも、この点に注意してください。
ページをローカルで提供されている場合、このイベントは正しく解雇されない場合があります。エラーは通常のHTTPステータスコードに依存しているため、URLがfile：プロトコルを使用している場合、通常はトリガーされません。
これはローカルでテストしていますか？
はい私はこれを最初に試みました。しかし、これも動作しません。ある特定のページでは、画像の一部が隠れています。しかし、他の人はまだクロスサインを示しています。 –
画像はどこから提供されていますか？ローカルまたはリモートサーバーからですか？ – markquezada
イメージは私のローカルApacheサーバーからのサーバーです。 –
あなたは異なる戦術を試してみて、代わりに、彼らはロード時に画像を表示することがあります：
jQuery('img').each(function(i,img){
jQuery('img').bind('load',function(){ this.show(); });
if (img.complete)
jQuery(img).show();
});
最初のバインドをイベントに、そしてどうかを確認イメージが既にロードされている（.complete）場合は、それを表示します。これにより、スクリプトを使用して、または個々の画像のインラインスタイル内で、すべての画像を事前に非表示にする必要があります。スコープとして既知の容器を使用する...
jQuery('#container img')
...この動作を画像のサブセットに限定することができます。
あなたは競合状態に対処しています。 jQueryは、イメージがロードされたときにロードされている場合とロードされていない場合があります。次のコードは、両方のケースを処理します。 FF、IE、クローム、サファリ、オペラでテスト
$('img').each(function() {
var img = this;
if (img.complete) {
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
console.log(img, 'load failed');
} else {
console.log(img, 'load ok');
}
} else {
$(img).error(function() { console.log(img, 'load failed - error()'); });
$(img).ready(function() { console.log(img, 'load ok - onload()'); });
}
});
。
$('img').each(function() {
var img = this;
if (img.complete) {
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
console.log(img, 'load failed');
} else {
console.log(img, 'load ok');
}
} else if (img.readyState == 'uninitialized') {
console.log('load failed - IE');
} else {
$(img).error(function() { console.log(img, 'load failed - error()'); });
$(img).ready(function() { console.log(img, 'load ok - onload()'); });
}
});
jQuery（Document）.ready（）にimg srcを読み込み、そこにあるかどうかを確認しましたか？ただのアイデア –