• 締切済み

jQueryでimgを使用すると、IE6で画像を複数回GETします

どなたかご存じの方がいらっしゃったら教えて下さい。 imgタグを生成し、単純に表示するのみのJavascriptを書きました。 実際書いた物は下記です。ｊQuery1.3.2を使用しております。 $(function() { tmp = $("<img />"); tmp.attr("src", "http://www.google.com/intl/ja/images/jawh_prodicons1.png"); $("body").append(tmp); }); こちらの内容のjsファイルをHTMLで読み込み、IE6上で表示、 何回かリロードしつつパケットモニターでGETを確認すると、 画像のGETが複数回発生する場合があります。 他のブラウザでは正常に1回のみGETされるようです。 IE6でも1回のみGETとなるようにしたいのですが、 解決方法を教えて頂けないでしょうか。 私の確認環境は WindowsXP SP2 IE6 パケットモニター SPM(http://wind-master.dip.jp/soft-info/) です。 よろしくお願いいたします。

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

$(function() { $("body").append('<img src="http://www.google.com/intl/ja/images/jawh_prodicons1.png" />'); }); とすればどうでしょう。

yaromihi
質問者

お礼

ご回答頂きありがとうございます。 しかしながら、私の乗せたコードは問題を絞るために単純にした物で、 実際のコードは回答頂いたように改造できません。 あらかじめimgをjQueryで保持し、後からappendしたいのです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jqueryで読み込みが終わった画像から処理する

    現在、下記のコードで画像を読み込んで処理をしているのですが、 画像の読み込みを待たずに、画像のリサイズ処理が実行されて画像が表示されない 現象に陥りました。 読み込みが終わった画像から処理する方法を ご教授ください。 よろしくお願いいたします。 $.each(json.img,function(){ $('<img/>').attr('src',this).appendTo(images); }); preview.append(images); //この後にリサイズ処理

    • ベストアンサー
    • AJAX
  • ie9でimgの高さがheight属性と異なる

    お世話になっております。 ie9でimgのheight属性の指定が効かず、指定値より大きく表示されてしまいます。 widthは効いています。 （確認はVBで同じ大きさの画面を表示して確認しています） 同じhtmlをie8で表示させると正しく表示されます。 heightの指定を変更すると大きくなったりしますが、適正な大きさで表示されません。 １００％表示ですのでheight属性を削除してみましたが同じ状態です。 よおしくお願いいたします。

    • ベストアンサー
    • HTML
  • 【jQuery】複数の画像の読み込み完了感知方法

    やりたいこと。 すでに表示しているHTML画面上にさらにHTMLタグ（画像を含む）を表示したい。 そのタグにて表示されるべきものがすべて表示されたら、新たに別の関数を実行したい。 ■画像がひとつの場合はこんな感じ？ $("#hoge").click( function(){ var jqObj = $("<div />"); var imgObj = $("<img />"); imgObj.attr({ "src":"./g.bmp"}); imgObj.load(function(){ jqObj.prepend(imgObj); $("body").prepend(jqObj); 　　　　 //このへんに描画は終わった状態での処理 }); } ); ■画像が複数ある場合はどう書けばよいでしょうか？ 以下のような書き方であってるのでしょうか？ $("#hoge").click( function(){ var jqObj = $("<div />"); var imgObj = $("<img />"); 　　　 var imgObj2 = $("<img />"); imgObj.attr({ "src":"./g.bmp"}); imgObj2.attr({ "src":"./f.bmp"}); imgObj.load(function(){ imgObj2.load(function(){ jqObj.prepend(imgObj); jqObj.prepend(imgObj2); $("body").prepend(jqObj); 　　　　 //このへんに描画は終わった状態での処理 }); }); } ); PS そもそもどの時点でブラウザは画像をWEBサーバに要求するのでしょうか？ imgObj.attr({ "src":"./g.bmp"});　の時点でgetの要求出すのでしょうか？

  • Ajax・jQueryでＧＥＴ時にＩＥで文字化け

    Ajax・jQueryで日本語をGETするとき、IEで文字化けします。 (Firefox,chromeでは文字化けは起こりません。IE6/7/8で確認すると文字化けします） どのようにしたら文字化けが起こらなくなるか教えていただければと思います。 環境 PHP:5.1.6 サーバー・HTMLの文字コードはUTF-8 下記のようなリンクを作り、「jquery.url.js」でパラメータを取得しています。 <a href="./test.php?keyword=テスト&cate=1"> （実際には下記のソースに示しますが、テストの文字はurlencordしています。） 【javascript部分】 <script type="text/javascript" src="jquery.url.js"></script> <script type="text/javascript"> $().ready ( function() { $('#sample-get').find('a').click ( function() { var url = $.url ( $(this).attr('href') ); $.ajax ({ type: 'GET', url: 'send.php', cache: false, data: url.attr ( 'query' ), success: function ( data, dataType ) { $('#test').html ( data ); }, error: function ( XMLHttpRequest, textStatus, errorThrown ) { this; alert('Error : ' + errorThrown); } }); return false; }); 【HTML(PHP)部分】 $keyword='テスト'; $keyword=urlencord($keyword);//urlエンコード echo<<<EOF <div id="sample-get"> <a href="./test.php?keyword=$keyword&cate=1"><img src="images/sample1.png" alt="sample1" height="200" width="200"></a> </div> EOF; 【PHP部分(send.php)】 <?php echo $_GET['keyword']; echo urldecord($_GET['keyword']); echo $_GET['cate']; ?>

    • ベストアンサー
    • AJAX
  • IMGタグでTIFF画像を表示

    こんにちは。標題の件で悩んでいます。 ある程度WEBで調べたのですが、有力な情報が見当たりませんでした。ご存知のことがありましたら、何でも結構ですので教えてください。Windows前提ということでお願いします。 ・IE5では、IMGタグでTIFF画像を表示させることは問題なく可能です。 ・IE6だと、表示できたりできなかったり。TIFFファイルのサイズが関係している気がする。 ・また、IE6でも、同じTIFFファイルを表示できるマシンとできないマシンがあり、どこがポイントなのか掴めない状況。 ・HTMLのIMGタグで、TIFF形式の表示は正式にはサポートされていないと思うのですが、どこで確認できますでしょうか？

    • ベストアンサー
    • HTML
  • [jQuery]フォームで画像切替、遷移しても維持

    こんにちわ。jQuery初心者です。 入力フォーム内で、3択のラジオボタンの選択内容によって 画像アイコンを切り替える仕組みを作成しています。 ▼javascript(jQuery)側 $(function(){ $("input[name='ans[reply]']:radio").click(function() { var index = $("input[name='ans[reply]']:radio").index(this); switch(index) { case 0 : $('img#chageImg').attr('src','../../common/img/icon_02.gif'); break;　//デフォルト case 1 : $('img#chageImg').attr('src','../../common/img/icon_01.gif'); break; case 2 : $('img#chageImg').attr('src','../../common/img/icon_01.gif'); break; } }); ▼html側 <body onload="chgImg();"> <img src="/common/img/icon_02.gif" alt="#" id="chageImg" width="40" height="20" /> 切り換え自体は、↑の書き方で問題なく動くのですが、 [submit]した後の入力エラーや、確認画面へ遷移後に戻ると、 上記の"デフォルト"のアイコン表示に戻ってしまいます。 ※エラーチェックやvalueの受け渡しはPHPで制御しています。 下記（A）（B）2通りの方法を思い付き、 リファレンスではまだ応用がよく分からず、行き詰まっています。 （A）関数化して、bodyのonloadで読み込む （B）cookieで制御　※再来訪の際には、"デフォルト"のアイコン表示 どちらかシンプルな方法で わかる方がいらっしゃいましたら、教えていただけないでしょうか。 よろしくお願いいたします。

  • jqueryのスライドショー。htmlに画像1枚で

    jquery-1.5.1.min.jsを使ってjpg画像を ランダムにスライドショーさせるプログラムで、 下記ポイントを満たしたプログラムへ変えたいです。 ・scriptが機能しない場合には画像がちゃんと表示される ・html上にスライドショーに使う画像を並べない（下記コード参考＝【画像多いバージョン】） ・修正するコードは【画像1枚バージョン】 よろしくお願いします。 【画像1枚バージョン】 <script type="text/javascript"> $(function(){ 　var elm = $(".fadein"); 　elm.children("img").hide(); 　(function(){ 　　var img = elm.children("img:hidden"); 　　elm.children("img:not(hidden)").fadeOut(1000); 　　$(img.get(Math.floor(Math.random() * img.length))).fadeIn(500); 　　var id = setTimeout(arguments.callee, 5000);　　 　})(); }); </script> <div class="fadein"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> </div> 【画像多いバージョン】 <script type="text/javascript"> imgLength = 20; firstInt = 1; imgChangeSpeed = 5000; imgExtension = ".jpg"; imgDirectory = "img/"; randomInt = firstInt + 1; $(function(){ var t = setInterval(loadImg, imgChangeSpeed); function loadImg(){ $("#gallery").children("img").animate({'opacity':'0'}, 0) $("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'}, 1000); if(randomInt < imgLength){ randomInt = parseInt(randomInt) + 1; } else{ randomInt = 1; } } }); </script> <div id="gallery"> <img src="img/1.jpg" /> </div>

  • ie10で背景に指定した画像が滲む

    ウェブサイト用のカンプを作成して1枚のjpg（png）で保存し、cssで背景にno-repeatで設置して表示確認をおこないました。下記のようなコードです。 ～ <!--表示例（1）--><div style="background:url(該当画像名.jpg) no-repeat"></div> <!--表示例（2）--><div><img src="該当画像名.jpg" alt="" /></div> ～ 上記で同じ画像を背景で配置した場合と、imgタグで設置した場合に、 ieのみ、背景に設置した画像が滲むような表示になってしまい、クリアに表示する方法がないか教えていただけないでしょうか。 win7のIE10、Firefox30、chrome35の環境で表示確認をおこないました。 IE以外での表示は問題ありませんでした。 また、拡大率等は100％です。 よろしくお願いいたします。

    • 締切済み
    • CSS
  • ＨＰ作成時、ＩＥでは画像が表示されるのですが、Mozillaでは画像が表示されません。

    ＨＰ作成にお詳しい方、ご回答お願いします。 現在ＨＰを作成しています。（ＣＳＳ使用） 画像貼り付け(表示)についてなんですが、ＩＥで確認したところ、きちんと表示されたのですが、Mozillaでは全く表示されませんでした。(無表示) どんな問題点が考えられるでしょうか？ ちなみに、貼り付けにはimgタグを使用し、あるクラスの中で表示させようとしています。また、普通にまっさらなＨＴＭＬ文書にimgタグで画像を貼り付けたところ、Mozillaでも表示されました。 また、質問は変わりますが、topやrightなどのポジショニングのタグもMozillaでは対応していないのでしょうか？ 私の知識不足で、分かりにくい質問であったとしたらすいません。。

  • IE6、7で途切れてしまう画像

    分からない部分が出た際にいつもお世話になっております。 今回もどなたかご回答頂けますと幸いです。 グローバルナビゲーションを中央揃えにして表示させようとしているのですが、 IE6と7で確認したときになぜか下部分が途切れてしまいます（1pxくらい？） 高さは指定している筈なのですが… 【html】 <div id="global-nav"> <ul> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="191" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト"　width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="193" height="43" /></a></li> </ul> </div> 【css】 div#global-nav { position:relative; height: 43px; background:url(../common/navi_bg.jpg) repeat-x center bottom; overflow:hidden; } div#global-nav ul { position:relative; left:50%; float:left; list-style-type:none; } div#global-nav li { position:relative; left:-50%; float:left; } 宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する