JQuery AJAX IE不一致

Question

別のInternet Explorerの問題！楽しさは決して終わりません... これはAJAXとIEに関連しています。私はJQueryを使って関数を構築し、PHPページを使って新しいHTMLコンテンツをプルロードし、プリロードして、古いコンテンツでコンテンツを切り替えます。ここでは以下の私のコードは次のとおりです。 - 仕上げ加工まで、トリガのonclickのイベントを削除します。それはこのないステップバイ

function showcase() { 

    document.getElementById("home").onclick = ""; 
    var x = Math.floor(Math.random()*100000); 
    $('#showcaseLoad').css('display', 'block'); 
    $.ajax({ 
     type: "POST", 
     url: "test.php", 
     data: "not=" + showcase_current_id + "&x=" + x, 
     error: function() { alert("Failure"); }, 
     success: function(s_results) { 
      if(showcase_current == 0) showcase_current = 1; 
      else showcase_current = 0; 

      s_parts = s_results.split("|"); 
      showcase_current_id = s_parts[0]; 
      var s_content = "<img id='showcase_image_" + s_parts[0] + "' src='"+s_parts[3]+"' alt='Showcase Preview Image' />\n" + 
          "<h2 style='color:#"+s_parts[4]+";'>"+ s_parts[1]+" &mdash; <em>"+s_parts[2]+"</em></h2>" + 
          "<p>"+s_parts[5]+" <a href='"+s_parts[0]+"' style='color:#"+s_parts[4]+";'>[ Read On ]</a></p>" + 
          "<div style='display:none;'>" + s_parts[6] + "</div>"; 

      $("#showcase_" + showcase_current).html(s_content);      
      showcase_image = new Image(); 
      showcase_image.src = s_parts[3]; 
      showcase_image.onload = function() {          
       $("#showcase_0").slideToggle(1400);   
       $("#showcase_1").slideToggle(1400);     
       setTimeout("document.getElementById('home').onclick = function() { showcase(); }; $('#showcaseLoad').css('display', 'none');", 1500); 
      }; 
     } 
    }); 
} 

ステップ。 - ローディングバーを上にスラップする（showcaseLoad） - AJAX関数を実行します（IEの利点のためにPOSTを使用し、それが一意であるように乱数を使用します）。 - 結果を取得し、|デリミタ。 - HTMLコンテンツ を作成します - 助成金は再許可

アクティブデモのonclick - スワップ2つのDIVオーバー（slideToggle） - 新しいイメージ をプリロードします。完全にそれは時折意志IE以外のすべてのブラウザでhttp://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/design1.php ワークス仕事をして、それからちょうど壊れます。

アイデア？非常に感謝しています。 （既にキャッシュされていない、一意のURL、一意の応答） Ian Clark

Answer 1

あなたの問題は、あなたの画像のURLが毎回一意ではないという事実にあります。したがって、同じイメージを要求すると、そのイメージはキャッシュされ、イメージ・ロード・イベントは実行されません。

要求するたびにクエリ文字列にタイムスタンプを追加することで、一意のURLを保証できます。

例えば「http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/curves.jpg?t=12322323」

を、それはあなたが再び動作してしまいますしかしあなたはキャッシュの利点を欠場します。

しかし、私はこれについて別のデザインを考えていましたが、これはもう少し深く、恐らくこの質問の境界の外にあります。

Answer 2

ホームボタンのHTMLコードにあるオンクリックを取り除く。 jqueryを使用して、そのボタンを選択してクリックイベントリスナーを追加することができます。あなたのhtmlを乱雑にする必要はありません。

また、ドキュメント以外のものにjquery loadイベントを使用することもできます。その場合、画像に便利です。また、loadイベントは、既に「ロード」されていてIEが古いものをトリガーしないという問題を修正します。 "onload"イベント。 （IE8とIE7でテスト済み）

イメージに余分なランダムな文字列を追加する必要はありません。その後

この試してみてください。使用したというし、戻り値の型としてJSONを使用しないのはなぜ

$('#home').click(function(){ 
    if(!$('#showcaseLoad:visible').length) showcase(); 
}); 

function showcase() { 
    var x = Math.floor(Math.random()*100000); 
    $('#showcaseLoad').show(); 
    $.ajax({ 
     type: "POST", 
     url: "test.php", 
     data: "not=" + showcase_current_id + "&x=" + x, 
     error: function() { alert("Failure"); }, 
     success: function(s_results) { 
      if(showcase_current == 0) showcase_current = 1; 
      else showcase_current = 0; 

      s_parts = s_results.split("|"); 
      showcase_current_id = s_parts[0]; 
      var s_content = "<img id='showcase_image_" + s_parts[0] + "' src='"+s_parts[3]+"' alt='Showcase Preview Image' />\n" + 
          "<h2 style='color:#"+s_parts[4]+";'>"+ s_parts[1]+" &mdash; <em>"+s_parts[2]+"</em></h2>" + 
          "<p>"+s_parts[5]+" <a href='"+s_parts[0]+"' style='color:#"+s_parts[4]+";'>[ Read On ]</a></p>" + 
          "<div style='display:none;'>" + s_parts[6] + "</div>"; 

      $("#showcase_" + showcase_current).html(s_content) 
      .find('img').load(function(){ 
       $("#showcase_0").slideToggle(1400); 
       $("#showcase_1").slideToggle(1400,function(){ 
        $('#showcaseLoad').hide(); 
       }); 
      }); 
     } 
    }); 
}