Question

I’ve got a site that is using javascript to resize images to a max width/height. I’m using javascript and not CSS to do this so it is backwards compatible with older browsers. My issue is that in Chrome it seems to not resize the image all the time. Sometimes on the first visit to a page the image is not resized, on reload and subsequent visits it is resized.

http://justinzaun.com/Tree/people/@I116@.php for an example page but really any of the people pages on the site can show the same issue. I’m trying to resize in $(window).load() and $(documnet).ready() this is taking place in the familytree.js file.

The username/password is admin/pwd

Answer 1

You call this code:

$(this).find("img").load(function() { resize($(this)); });

Which does nothing if the image has already loaded.

Use this instead:

var $img = $(this).find("img");
$img.load(function() { resize($(this)); });
// If image is already loaded then it will have a height
if($img.height())
    resize($img);

That will call resize on load, but if the image is already loaded it will call resize anyways.