Scaling images w/jQuery - browser cache in the way

Question

To see my problem in action, 1st click this link. Then click this one. Notice how the images are squished? (you may have to click a through the pager to see it).

I believe it's because of the browser cache. Here's the javascript doing the work:

$("#grid_slider").slider({
 value: 50,
 max: 100,
 min: 10,
 slide: function(event, ui) {
  $('ul#grid li').css('font-size',ui.value+"px");
 }
});

$("ul#grid li img").each(function() {
 var width = $(this).width() / 125 + "em";
 var height = $(this).height() / 125 + "em";
 $(this).css("width",width);
 $(this).css("height",height);
});

I hope you're able to reproduce the problem. Not sure what needs to be done to fix this... was thinking about just taking out the feature all-together. Thanks in advance.

Answer 1

I see the problem you're describing. I don't think it's the browser cache, actually, but the load time... I've seen the problem on some other sites too, and so I've formed an (ill-informed) opinion on it.

It appears that the main issue is that the browser is being asked the image's size before it knows what that is... Your script fires on $(document).ready, but that might be before $("ul#grid li img") is fully loaded, so for some images $("ul#grid li img").width() might not be known...

Maybe use this instead, and see if that helps? (switches $().each for $().load)

$("ul#grid li img").load(function() {
    var width = $(this).width() / 125 + "em";
    var height = $(this).height() / 125 + "em";
    $(this).css("width",width);
    $(this).css("height",height);
})

(Completely a guess, though...)

Addendum: reading the jQuery help on the load function just now, it appears that this doesn't get run for things already loaded by the time this is called... So you might have to do both (call $().each and set $().load)...