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的组合来控制＆＃34;视图＆＃34;。

看看这个小提琴： 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对象数组，以便更好地参考，等等。

onload对IE中的ajax内容触发太早

1 个答案: