Javascript not firing when expected

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 im开发者_Python百科age 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

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.

This might be WebKit bug 45586, your code doesn't know the size of the image. Typically, a beforeload handler is being registered by extensions such as Adblock or Adblock Plus.

You are listening for the image load event after window.onload has triggered, which means that all images should already be loaded. Try something like:

$(function() {
  // on DOM ready
  $('img').each(function() {
    var $img = $(this);
    (this.width && this.height) ? resize($img) : $img.load(function() {
      // timeout to prevent webkit bug 45586
      window.setTimeout((function($img) {
        return function() {
          resize($img);
        };
      }($img)),2);
    });
  });
});