jQueryで画像のリンク切れ時に別の画像に切り替える方法

このQ&Aのポイント
  • jQueryを使用して、画像のリンク切れ時に別の画像に切り替える方法を検討しています。具体的には、画像のリンクが切れている場合にNoimageの画像ファイルを表示するようにしたいと思っています。現在の実装では、FirefoxやChromeでは正常に動作するものの、IEでは一貫性のない動作となっています。原因が分からないため、他の方法で同様の機能を実現する方法を知りたいです。
  • 現在、jqueryを使用して複数の画像を表示する画面を実装していますが、画像のリンクが切れている場合にはNoimageの画像ファイルに差し替えるようにしたいと考えています。具体的な実装方法としては、img要素のerrorイベントを監視し、リンク切れの場合にはimg要素のsrc属性をNoimageの画像ファイルに変更するというものです。ただし、この実装ではFirefoxやChromeでは正常に動作するものの、IEでは一貫性のない動作となっています。原因が分からないため、別の方法で同様の機能を実現する方法を知りたいです。
  • 画像のリンク切れ時に別の画像に切り替える機能を実装するために、jqueryを使用していますが、現在の実装ではIEで不安定な動作となっています。具体的には、画像のリンク切れ時にはNoimageの画像に差し替えるようにしていますが、IEでは正常に動作する場合もあればしない場合もあり、複数の画像のうちいくつかは正常に動作し、残りは正常に動作しない場合もあります。原因が分からず困っており、他の方法で同じ機能を実現できるか知りたいです。
回答を見る
  • ベストアンサー

jquery について質問させて頂きます。

jquery について質問させて頂きます。 複数の画像を表示する画面について、 画像のリンクが切れていた場合、表示する画像を差し替えるために、 jqueryにて以下の実装をしています。 ------------------------------------------------------------------ $(document).ready(function(){ $("img").error(function(){ // 画像のリンク切れの場合、Noimageの画像ファイルに差し替える $(this).attr("src","Noimage.gif"); // ブラウザにはエラーを返さない return true; }); }); ------------------------------------------------------------------ 上記の実装で、firefox、chromeだと正常に動作する(画像リンク切れの場合にNoimage画像に差し替えられる)のですが、 IE(バージョン9しか試してませんが。)だと、 ・正常に動作する(画像リンク切れの場合にNoimage画像に差し替えられる)場合がある。 ・正常に動作しない(画像リンク切れの場合にNoimage画像に差し替えられない)場合がある。 ・複数件のリンク切れ画像の内、何件かは正常に動作し、残りは正常に動作しない場合がある。 などというように、動作に一貫性がなく、不安定です。 原因が分かる方がいましたら、 もしくは、 原因が分からずとも、違う方法で、 「画像のリンク切れの場合に、他の画像に切り替える」という実現方法をご存知であれば、 教えて頂きたくお願いいたします。 本を読んだり、ネットで調べたり、色んな方に聞いてみましたが、誰も分からず はっきり言って、お手上げです。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1
drumsoccer
質問者

お礼

ご回答頂き、ありがとうございます! jqueryにこだわりすぎていて、調べ方が甘かったようです。 こんなイベントハンドラがあるんですね。。。 助けて頂きました。本当にありがとうごhttp://okwave.jp/qa/q6943972.html#ざいました!

その他の回答 (1)

  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

ちょっとjQueryからは外れますが、単純にimgの背景にNoimageの画像を指定するってのはどうでしょう? 正常に読み込まれたら、Noimage画像の上に正常画像が表示されて、読み込まれなかったら、Noimga画像のままです。

drumsoccer
質問者

お礼

ご回答頂き、ありがとうございます! プログラミングを始めて間もないので、そんな発想は思いつきませんでした。。。 本当にありがとうございました!

関連するQ&A

  • jqueryが稀に動かない

    あるサイトからコピペしてきたソース $(function () { $('img').error(function () { $(this).attr({src: 'http://www.geocities.jp/kadenkoujiya1242/img/noimg.png'}); }); }); 画像がリンク切れしていた時などに代わりの画像を挿入するソースですが http://www.jslint.com/ で文法チェックしてみたら '$' was used before it was defined. $(function () { $('img').error(function () { $(this).attr({src: 'http://www.geocities.jp/kadenkoujiya1242/img/noimg.png'}); }); }); line 1 character 17 Missing 'use strict' statement. $(function () { $('img').error(function () { $(this).attr({src: 'http://www.geocities.jp/kadenkoujiya1242/img/noimg.png'}); }); }); と出ました。これはどのような意味があるのでしょうか?英語わかりません(泣) よかったらどのようにすれば治るかアドバイスお願いします!

  • jqueryの質問。

    毎回、お世話になります。 jqueryを使ってリンク文字をクリックすると画像が変更できるようにしたいのですが、 上手くいきません。 <HTML> <body> <ul> <li><a href="DSC_0014.jpg">a</a></li> <li><a href="kamen.jpg">b</a></li> <li><a href="irumi.jpg">c</a></li> </ul> <p><img src="DSC_0014.jpg" width="1000" height="671"> <SCRIPT> $(function(){ ("a:eq(0)").click(function(){ $("img").attr("src","DSC_0014.jpg").attr("alt","人物"); return false }); $("a:eq(1)").click(function(){ $("img").attr("src","kamen.jpg").attr("alt","仮面"); return false }); $("a:eq(2)").click(function(){ $("img").attr("src","irumi.jpg").attr("alt","イルミ"); return false }); }); このコードだとリストa,b,cをクリックすると別ページに画像が表示されます。 その場での画像切り替えをしたいのですが、どこが間違っているのでしょうか? 宜しくお願い致します。

  • jqueryについて【初歩】

    見ていただきありがとうございます。 jqueryについて初歩的な質問です。 下記の記述は ひとつのボックスに対して内包するaタグのリンクを指定してボックスごとリンクにしているスクリプトになりますが、これにtargetの属性を付加させたいです。 しかしいろいろ試しましたがうまくいかず、ツンでます… jqueryに精通している方宜しければご回答いただけませんでしょうか? よろしくお願いいたします。 $(function(){ $(".sampleBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });

  • このjqueryが稀に動かない

    画像が無いときに表示されるscriptですが稀に動かない時があります10分の4位動かないです。どのようにすればよろしいでしょうか? <script type="text/javascript" src="/kadenkoujiya1242/js/jquery.js"></script> <script type="text/javascript" src="/kadenkoujiya1242/js/noimg.js"></script> $(function () { $('img').error(function(){ $(this).attr({src:'/kadenkoujiya1242/img/noimg.png',alt:'画像が見つかりません'}); }); });

  • jqueryについて

    サムネイルをマウスオーバーすると#targetに拡大画像を表示するものなのですがマウスオーバーで 切り替わりマウスアウトで元に戻るとこまではいいのですがフェードが全く効きません。 いろいろ試したところ$(".thumbnail a img")に変えるとフェードはするのですが今度は画像が 切り変わらなくなってしまいす。両者実装するにはどのように書き換えればいいのでしょうか? $(document).ready(function() { var originSrc = $("#target").attr("src"); $(".thumbnail a") .fadeTo(1,1) .hover( function() { var changeSrc = $(this).attr("href"); $("#target").attr("src", changeSrc); $(this).fadeTo(200, 0.5); }, function() { $("#target").attr("src", originSrc); $(this).fadeTo(500, 1); } ) });

  • jqueryについて

    ただいま、jqueryのtoggle()を使って、 チェックボックスのON/OFFでimgのclassを切り替える(imgをクリックしてチェックボックスをON/OFFもできる)ということを しているのですが、なぜか、チェックボックスをクリックしても、 ボタンの反応はしているのですが、チェック(黒い「レ」)が表示されません。 以下、jsです。 ※チェックボックスと画像の組み合わせは複数あります。 $(function(){ $("li.p01").toggle( function(){ $("input.c01").attr("checked","checked"); $("li.p01").attr("class","p01on"); }, function(){ $("input.check01").removeAttr("checked"); $("li.p01on").attr("class","p01"); } ); $("input.check01").toggle( function(){ $("li.p01").attr("class","p01on"); }, function(){ $("li.p01on").attr("class","p01"); } ); $("li.p02").toggle( function(){ $("input.check02").attr("checked","checked"); $("li.p02").attr("class","p02on"); }, function(){ $("input.check02").removeAttr("checked"); $("li.p02on").attr("class","p02"); } ); $("input.check02").toggle( function(){ $("li.p02").attr("class","p02on"); }, function(){ $("li.p02on").attr("class","p02"); } ); }); ご教授お願いいたします。 また、ボタンが10個あるのですが、 このまま、複製していくのもどうかと思うんですが、 もっと簡単にまとめる方法などあるのでしょうか。 ご回答よろしくお願いいたします。

  • jqueryのコードについて

    $(function () { $("親要素").click(function () { window.location = $(this).find("a").attr("href"); return false; }); }); 上記jqueryのコードで 子要素のリンクを親要素に適用させていますが、 子要素にリンクがない場合も親要素にリンクが適用され クリックすると・・・/undefined にとばされます。 子要素にリンクがない場合は 親要素にリンクを適用しなようにするには どうしたらいいでしょうか。 お願いいたします。

  • jQuery1.7.2でのdisabledの扱い方

    jQueryで質問させてください。 自分は、チェックボックスとテキストエリアを連動させて、 チェックボックスがチェックされると、disabledが設定されていたテキストエリアが入力可能になり、 チェックボックスのチェックが外されるとテキストエリアに入力不可になるようなものを作っていました。 jQuery1.4.4では以下のように書いて動いていました。 しかし、1.7.2にするとどちらも動かなくなりました。 1.7.2の場合はどのように記述すると以下と同じような動きになるのでしょうか? 宜しくお願いします。 $(document).ready(function() { $('#hogecheck').click(function(e) { if($('#hoge').attr('disabled') == true) { $('#hoge').attr('disabled', ''); } else { $('#hoge').attr('disabled', 'disabled'); } }) });

  • jqueryにて

    こちらではお初にお世話になります。 よろしくおねがいします! さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: (省略)update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします!

  • jQuery 変数の代入

    jQuery 変数の代入 jQueryを使って.nextを押すごとに#areaに表示する画像を img1.jpg、img2.jpg、img3.jpg、、、、 と切り替えたいと思っているのですが、 下記のように書いても変数が入ってくれません…。 どのように記述すればよいでしょうか? よろしくお願いします。 $(function(){ var i=1; $(".next").click(function(){ i++; $("#area").attr("src","img",i,".jpg"); }) })

専門家に質問してみよう