javascript - 缩略图无法在 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()) {
            /* ... */
        }
    });
});