JavaScript的图像调整大小在IE11中不能正常工作，但在工作的版本（10,9,8）

Question

我在我的应用程序中使用wicket框架（html + java），当我需要调整图像时组件加载。代码在IE8,9,10中正常工作，但它在IE11中有时会失败。 有些时候它可以调整大小，但有时它不能这样做。当它失败时，它不会进入JavaScript代码。 请帮我解决这个问题。

<img wicket:id="bigImage" onload="resize_imgs(140,140,112,112)" /> 

这里上述图像compnenet是调用下面的JavaScript代码，并且将借此在所述图像大小调整。

<script type="text/javascript"> 
    function resize_imgs(maxht, maxwt, minht, minwt) { 
     alert("first line"); 
     var imgs = document.getElementsByTagName('img'); 
     var resize_img = function (img, newht, newwt) { 
      img.height = newht; 
      img.width = newwt; 
      alert("in resize image function :newht" + newht + "newwt:" + newwt); 
     }; 
     for (var i = 0; i < imgs.length; i++) { 
      var img = imgs[i]; 
      if (img.height > maxht || img.width > maxwt) { 
       var old_ratio = img.height/img.width; 
       var min_ratio = minht/minwt; 
       if (old_ratio === min_ratio) { 
        alert("ratios equal"); 
        resize_img(img, minht, minwt); 
       } 
       else { 
        var newdim = [img.height, img.width]; 
        newdim[0] = minht; 
        newdim[1] = newdim[0]/old_ratio; 
        if (newdim[1] > maxwt) { 
         newdim[1] = minwt; 
         newdim[0] = newdim[1] * old_ratio; 
        } 
        alert("ratios not equal"); 
        resize_img(img, newdim[0], newdim[1]); 
       } 
      } 
     } 
    } 
</script> 

UPDATE1：

在我appllication有大量的图像在一个页面，当我们点击图片或打开该网页时，先取图像或点击图像，并将其设置在顶部所以无论何时加载组件（img wicket：id =“bigImage”onload =“resize_imgs（140,140,​​112,112）”/>），我们将调用onload event.Now我一直在尝试与jquery.I更新它的问题。请您建议我是否正确。

<img class="resizeImage" wicket:id="bigImage" /> 


$(document).ready(function(){ 
$(".resizeImage").one("load", function() { 
// do stuff 
var maxht=140; 
var maxwt =140; 
var minht=112; 
var minwt=112; 
var img_height = $(this).height(); 
var img_width = $(this).width(); 

    if (img_height > maxht || img_width > maxwt) { 
    var old_ratio = img_height/img_width; 
    var min_ratio = minht/minwt; 
    if (old_ratio === min_ratio) { 
     $(this).css('height',minht); 
     $(this).css('width',minwt); 
    } 
    else { 
    var newdim = [img_height, img_width]; 
    newdim[0] = minht; 
    newdim[1] = newdim[0]/old_ratio; 
    if (newdim[1] > maxwt) { 
     newdim[1] = minwt; 
     newdim[0] = newdim[1] * old_ratio; 
    } 
    $(this).css('height',newdim[0]); 
    $(this).css('width',newdim[1]); 
    } 
}}).each(function() { 
     if(this.complete) $(this).load(); 
    }); 

Answer 1

如果图像可以从缓存立即拔出，那么IE将根本不触发load事件的图像。

您可以检查图像的complete属性是否为true。然后图像已经加载，你不会得到一个load事件，所以你可以直接调用该函数。示例：

var image = $('img'); 
if (image.prop('complete')) { 
    resize_imgs(140,140,112,112); 
} else { 
    image.load(function(){ 
    resize_imgs(140,140,112,112); 
    }); 
}