在Internet Explorer中縮略圖無法正常打開

Question

我遇到了Internet Explorer在頁面上不兼容的問題。 在這個頁面上有一個畫廊，裏面有圖片（縮略圖）可以顯示。每個縮略圖中有一個HTML頁面的鏈接，顯示的全尺寸圖像：

http://www.crazzy.com.br/upload/upload-img/pictures/f53986b24d8eb7f398d521faa31a1bc9.jpg）

的問題是，在Internet Explorer中的縮略圖未正確加載。如果我清除瀏覽器緩存並嘗試進入頁面，它們通常會顯示。

但是，再次進入頁面時，縮略圖不會出現。

http://www.crazzy.com.br/upload/upload-img/pictures/82c90a96a4710297e0d4c7ed99844956.jpg）

我試圖通過插入元不緩存來解決這個問題，但它仍然失敗：

<meta http-equiv="cache-control" content="max-age=0" /> 
<meta http-equiv="cache-control" content="no-cache" /> 
<meta http-equiv="expires" content="0" /> 
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> 
<meta http-equiv="pragma" content="no-cache" /> 

的圖像是從亞馬遜的服務器上，並且通常到來。問題是相同的顯示。

在鉻，火狐和safari正常出現。我還在新版本的Internet Explorer上進行了測試，問題依然存在。

任何人都可以幫忙嗎？謝謝！

遵循代碼（僅用於縮略圖）。我刪除了另一個不是非常廣泛的。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script> 
      $(function(){ 
       $(".img_thumb").each(function() { 
       $(this).one('load', function() { 
        if($(this).height() > $(this).width()) { 
         $(this).height(75); 
         $(this).width(52); 
        } else { 
         $(this).width(75); 
         $(this).height(52); 
        } 
        $(this).css("display", "inherit") 
      }); 
      }) 
      }) 
     </script> 

    <table width="100%" height="100%" align="middle" valign="middle"> 
     <tbody> 
     <tr> 
     <td align="middle" valign="middle"> 
      <div id="titleframe"> 
       <div class="titleContent"> 
        <div class="banner"> 
        </div> 
       </div> 
      </div> 
      <table cellpadding="10" cellspacing="10" border="0"> 
       <tbody> 
        <tr> 
        <td valign="middle"></td> 
        <td valign="top"> 
         <table> 
          <tbody> 
           <tr> 
           <td align="middle"> 
            <table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF"> 
             <tbody> 
              <tr> 
              <td valign="top" align="left"><a name="18864" href="Módulos/18864.html"><img class="img_thumb" src="https://s3.amazonaws.com/itatiaia/fotos/banheiros/serena/modulos/thumbnails/mod01.jpg" border="0" style="display:none; border:0pt solid white" alt=" "></a><br></td> 
              <td valign="top" background="https://s3.amazonaws.com/itatiaia/fotos/bella/images/wh_rt.gif"> 
               <img src="https://s3.amazonaws.com/itatiaia/fotos/bella/images/wh_top_rt.gif"><br> 
              </td> 
              </tr> 
              <tr> 
              <td width="auto" background="https://s3.amazonaws.com/itatiaia/fotos/bella/images/wh_bot.gif"> 
               <img src="https://s3.amazonaws.com/itatiaia/fotos/bella/images/wh_bot_lt.gif"><br> 
              </td> 
              <td valign="top"> 
               <img src="https://s3.amazonaws.com/itatiaia/fotos/bella/images/wh_bot_corner.gif"><br> 
              </td> 
              </tr> 
             </tbody> 
            </table> 
           </td> 
          </tbody> 
         </table> 
        </td> 
       </tbody> 
      </table> 
     <td valign="middle"></td> 
     </tr> 
    </tbody> 
</table> 
<div id="titleframe"> 
    <div class="titleContent"> 
     <div class="banner"> 
     <div class="info"></div> 
     <div class="email"><a href="mailto:"></a></div> 
     </div> 
    </div> 
</div> 
</tr> 

Answer 1

你有一個拼寫的問題在這裏：

$(this).one('load', function() { 

$(this).on('load', function() { 

此外，使用1個處理所有事件，沒有多少處理程序的單一類：

$(function(){ 
    $('.img_thumb').on('load', function() { 
     if($(this).height() > $(this).width()) { 
      /* ... */ 
     } 
    }); 
}); 

Answer 2

這些圖像可能已經在爲相同圖像添加load eventlistener之前加載。如果他們被緩存，這是尤其如此。 （你的meta標籤不會在那裏幫助，你將這些應用到html，它也將是不需要的） 幾個簡單的解決方案之一可能是在JavaScript中重新創建圖像元素，並在陰影圖像上應用EventListener。

可能有一些錯誤，在這裏，因爲我沒有測試它我也沒有把它寫在編輯器：

$(".img_thumb").each(function() { 
    var testImg = new Image(), 
     orgImg = this, 
     $orgImg = $(orgImg); 
    testImg.load = function() { 
     if($orgImg.height() > $orgImg.width()) { 
      $orgImg.height(75); 
      $orgImg.width(52); 
     } else { 
      $orgImg.width(75); 
      $orgImg.height(52); 
     } 
     $orgImg.css("display", "inherit") 
    } 
    testImg.src = origImg.src; 
});