Миниатюры не открываются должным образом в 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 не кэшировать, но он по-прежнему не удается:

<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" /> 

Изображения на сервере от амазонки и, как правило, приходят. Проблема в том же дисплее.

В хроме, firefox и сафари появляются нормально. Я также тестировал новые версии 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

Изображения может быть уже загрузите, прежде чем добавлять загрузчик событий для тех же изображений. Это особенно верно, если они были кэшированы. (ваши метатеги не помогут там, вы применяете их к 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; 
});