Question

I’m using this code to center images in a thumbnail field within a result div when displaying data:

<div class='result'>
    <div class='date_field'>15 Okt</div>
    <div class='thumbnail_field th_div'><img src='p.png' class='thumb'></div>
    <div class='content_field'><a href="p.html">p</a></div>
    <div class='price_field'>5</div>
</div>

.result{position: relative;background-color: white;height: 100px;overflow: hidden;margin: 0px 10px;}
.thumbnail_field{position: absolute;top: 8;left: 15%;width: 100px;height: 75px;background-color: #FFF;}
.th_div img{position: absolute;}

$(document).ready(function(){
var h = 75;
var w = 100;
$('.thumb').each(function(){
    $(this).load(function() {
        var width=$(this).width();
        var height=$(this).height();
        var ratio=width/height;
        var pwidth=$(this).parent().width();
        var pheight=$(this).parent().height();
        var newheight;
        var topmargin;
        var newwidth;
        var leftmargin;

        if(width/height>=4/3){
            $(this).css("width",w);
            newheight=w/ratio;
            topmargin=(h-newheight)/2;
            $(this).css("top",topmargin+"px")
        }else{
            $(this).css("height",h);
            newwidth=h*ratio;
            leftmargin=(w-newwidth)/2;
            $(this).css("left",leftmargin+"px")
        }

    });
});
});

It is working in Chrome and Firefox but works randomly in IE 8. Any tips about what can be the reason?

Answer 1

It could be a caching issue with the $.load function.

The callback for the load function fires if the image is not already present in your browser cache. If the image is present in the cache, the image load function callback is not executed – which explains the erratic behavior of the code on IE8.

More info around this here: jQuery .load() problem in all IE versions

This caveat also listed in the jQuery .load() description page: http://api.jquery.com/load-event/

Solution:

$(".thumb").one("load",function(){
// Add your positioning code here
})
.each(function(){
if(this.complete) $(this).trigger("load");
});

Cheers!