Question

这是我的代码。这使图像与productImage类垂直居中。我在课堂上有一堆图像。这在chrome中运行良好。但它常常在ie和firefox中。我无法弄清楚发生了什么。我认为它与图像加载时有关。我通过将load事件绑定到每个图像，它总是会等到每个图像都被加载直到它发生，但它不是......有时候。任何人都可以对此有所了解吗？

$('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有点多余。以上就是所需要的。

Answer 2

.load在图像，crossbrowser上简直不可靠。例如，从缓存加载图像时，Firefox不会触发它。查看jQuery docs for .load。

一节内容如下：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。应该注意有几个已知的警告。这些是：

它不能一致地工作，也不能可靠地跨浏览器   如果图像src设置为与之前相同的src，则它在WebKit中无法正确触发   它没有正确地冒泡DOM树   可以停止触发已经存在于浏览器缓存中的图像

根据我的经验，创建一个图像对象，将处理程序绑定到它的加载事件，然后设置src，如果可以采用该策略，则可以更可靠地工作。

Answer 3

jproductImage之前-是什么？

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

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

});

这是你在寻找什么？

遇到问题$（'img'）。load（function（）{something}）;在ie和firefox中

3 个答案: