JQuery AJAX IE 불일치

Question

다른 Internet Explorer 문제! 재미는 결코 끝나지 않습니다 ... 이것은 AJAX 및 IE와 관련이 있습니다. JQuery를 사용하여 PHP 페이지를 사용하여 새 HTML 컨텐트를 가져 와서 미리로드 한 다음 이전 컨텐트로 내용을 전환하는 기능을 빌드하는 데 도움이됩니다. 그것은이 수행 단계별로

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); 
      }; 
     } 
    }); 
} 

단계 : 여기 아래에있는 내 코드입니다 은 - 완료 처리 될 때까지 트리거의 onclick 이벤트를 제거합니다. | 은 - 결과를 검색하고를 사용하여 분할 -는 AJAX 기능을 수행합니다 (IES의 이익을 위해 POST를 사용하여, 그것은 독특한 그래서 임의의 숫자) - 상단 (showcaseLoad)를 통해 로딩 바 를 때려 구분 기호. 이 - HTML 콘텐츠 를 작성 - 두 된 DIV 이상 (slideToggle) 스왑 - - 새 이미지 미리로드 다시 부여 권한의 onclick을 활성 데모

: IE보다 모든 브라우저에서 완벽하게 http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/design1.php 작품은 다른 곳 가끔 것이다 일하고, 그 후에 다만 끊을 것이다.

아이디어가 있으십니까? 많이 감사했습니다. (이미 캐시가 설정되지 않은 고유 URL, 고유 응답) 이안 클라크

Answer 1

문제는 이미지 URL이 매번 고유하지 않기 때문에 발생합니다. 따라서 즉, 동일한 이미지를 요청하면 캐시되고 이미지로드 이벤트가 실행되지 않습니다.

당신은 쿼리 문자열에 당신이 그것을 요청할 때마다 타임 스탬프를 추가하여 고유 한 URL을 보장 할 수 있습니다.

예 : "http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/curves.jpg?t=12322323는"

당신은 그러나 당신이 다시 실행 얻을 것이다 캐싱의 장점을 그리워합니다.

나는이 그러나에 대해 서로 다른 디자인을 고려 앞으로 것이다가는 그러나 이것은 좀 더 깊이 아마도이 질문의 경계 밖에 있습니다.

Answer 2

은 홈 버튼에 HTML 코드에있는 onclick을 제거하십시오. jquery를 사용하여 해당 버튼을 선택하여 클릭 이벤트 리스너를 추가 할 수 있습니다. html을 지저분하게 만들 필요가 없습니다.

또한 문서 이외의 것들에 jquery load 이벤트를 사용할 수 있습니다.이 경우 이미지에서 편리 할 것이고 load 이벤트는 이미 "로드 중"이고 이전 이벤트를 트리거하지 않는 문제를 수정합니다 "onload"이벤트. (IE8 및 IE7에서 테스트)

당신은 이미지에 추가 임의의 문자열을 추가해야 할 필요가 없습니다.

$('#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(); 
       }); 
      }); 
     } 
    }); 
}