javascript - 对于 IE 中的 ajax 内容，onload 触发过早

Question

我有一个页面，其中动态提供图像并使用 javascript 缩放以适合适当的尺寸。这最初是通过 img 标签中的 onload 属性完成的，但后来我注意到在 IE 中，为图像返回的高度在某些情况下比实际高度小得多，这最终导致图像失真。我通过在 $(window).load() 完成后查找并调整所有图像的大小来解决这个问题，这对于初始页面加载工作正常，但我还设置了页面以通过 ajax 调用添加更多内容。对于 ajax 内容，我尝试了一些我在此处找到的改进问题的代码，但并没有完全解决它。这是我的一个图像标签的示例

<img id="img<?php echo $prodModObj->rolloverID; ?>" class="mbImg unsized" src="<?php echo $prodModObj->img; ?>" alt="<?php echo $prodModObj->name; ?>" onerror="swapImage(<?php echo $prodModObj->rolloverID; ?>)" />

如果加载时出现错误，swapImage 函数只是用占位符换出图像。这是我的 JS

function swapImage(thisImgID) {
    var imgID = 'img#img' + thisImgID;
    $(imgID).attr('src', '/images/NoImageAvail.jpg');
}

function checkImage(thisImgID, fitDimension, spaceDimension) {
    var imgID = 'img#img' + thisImgID;          
    var imgHeight = $(imgID).height();
    var imgWidth = $(imgID).width();
    var displayHeight, displayWidth, newMargin;

    if (imgHeight > imgWidth) {
       displayHeight = fitDimension;
       displayWidth = imgWidth*(displayHeight/imgHeight);
    } else if (imgHeight < imgWidth) {
       displayWidth = fitDimension;
       displayHeight = imgHeight*(displayWidth/imgWidth);
    } else {
       displayWidth = fitDimension;
       displayHeight = fitDimension;
    }
    $(imgID).css('height', displayHeight);
    $(imgID).css('width', displayWidth);
    newMargin = ((spaceDimension - displayHeight)/2);
    $(imgID).css('margin-top', newMargin);
    $(imgID).removeClass('mbImg unsized').addClass('mbImg sized');
}

然后在我的页面上

$(window).load(function(){

// Resize product images

  $('.mbImg.unsized').each( function() {
     var rolloverID = $(this).attr('id').substr(3);
     checkImage(rolloverID,250,270);
  });

});

然后在 ajax 调用的成功部分，我有

$('.mbImg.unsized').each( function() {
     var rolloverID = $(this).attr('id').substr(3);
     if (this.complete) {
         checkImage(rolloverID,250,270);
     } else {
         $(this).on('load', function(){
            checkImage(rolloverID,250,270);
         });                   
     }
});

浏览器缓存的图像工作正常，初始页面加载中的图像工作正常，但大约五分之一的新 ajax 图像出现失真。是否有另一种方法可以用来在 IE 中正确调整所有 ajax 图像的大小？

谢谢你的帮助，

Answer 1

也许换一种方式？

我试图摆脱 html4 风格的标签语法，转而使用简单的 html5 标签和 JavaScript 和 CSS 的组合来控制“ View ”。

看看这个 fiddle : http://jsfiddle.net/zacwolf/s1haq3mz/

问题变成了您希望图像如何流动，因为使用这种方法所有图像在技术上都是相同的大小(如边框所示)。另请注意，第二张图片的 .src 我对 url 进行了一些调整，使其成为图片文件的 404，这反而触发了一个错误图片。

<img id="one" class="myclass" />
<img id="two" class="myclass" />
<style>
.myclass{
    height:270px;
    width:250px;
    background-position:center,center;
    background-repeat:no-repeat;
    background-size:contain;
}
</style>
<script>
var one = new Image();
one.onerror=
    function(){
        this.src='http://leomarketingep.com/wp-content/uploads/Sign-Error-icon.png'
    }
one.onload=
    function(){
        $('#one').css('background-image','url('+one.src+')')
    }
one.src='https://cjjulian.files.wordpress.com/2009/04/blah_blah_blah-703369.jpg';

var two = new Image();
two.onerror=
    function(){
        this.src='http://leomarketingep.com/wp-content/uploads/Sign-Error-icon.png';
    }
two.onload=
    function(){
        $('#two').css('background-image','url('+two.src+')')
    }
two.src='https://cjjulian.files.wordpress.com/2019/04/blah_blah_blah-703369.jpg';
</script>

如果你有很多图片，你可以填充一个 Image 对象数组，以便更好地引用等。