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);
    });
  });
});