javascript - 遇到问题 $ ('img' ).load(function(){something});在 ie 和 firefox 中

Question

这是我的代码。这使用类 productImage 垂直居中图像。我在类里面有一堆图片。这在 chrome 中运行良好。但在 ie 和 firefox 中是断断续续的。我不知道发生了什么事。我认为这与加载图像的时间有关。我虽然通过将加载事件绑定(bind)到每个图像，它总是会等到每个图像被加载直到它触发，但它不是......有时。任何人都可以阐明这一点吗？

$('img.productImage').each(function(){
var jproductImage = $(this);

jproductImage.load(function(){
    jproductImage.css({
    'margin-left' : -jproductImage.width()/2 + 'px',
    'margin-top': -jproductImage.height()/2 + 'px'
    });
});

});

谢谢，马特

Answer 1

可能是浏览器缓存了图片，从而阻止了 .load 事件的触发。您可以通过测试每个图像上的 .complete 属性及其设置位置，手动触发 .load 事件来避免此问题:

$('img.productImage').one("load",function() {
    $(this).css({
        'margin-left': $(this).width() / 2 + 'px',
        'margin-top': $(this).height() / 2 + 'px'
    });
}).each(function() {
    if(this.complete) $(this).trigger("load");  
});

此外，您的外部 .each 有点多余。以上就是所需的全部内容。