Question

Here is my code. This centers images vertically with the class productImage. I have a bunch of images within the class. This works fine in chrome. but itermittently in ie and firefox. I can’t figure out what’s going on. I think it has something to do with when the image is getting loaded. I though by binding the load event to each image, it would always wait until each image is loaded until it fires, but it is not … sometimes. Can anyone shed some light on this?

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

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

});

Thanks,
Matt

Answer 1

It could be that the images are getting cached by the browser, thereby preventing the .load event from firing. You can circumvent this problem by testing for the .complete property on each image, and where it is set, manually triggering the .load event:

$('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");  
});

Also, your outer .each is a bit redundant. The above is all that is needed.