缩略图无法在 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" />

图像位于亚马逊的服务器上，并且通常会出现。问题是相同的显示。

在 chrome 中，firefox 和 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

在为相同图像添加加载事件侦听器之前，图像可能已经加载。如果它们被缓存，则尤其如此。 （您的元标记在那里无济于事，您将这些标记应用于 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;
});