Image does not have width at document.ready

Question

I have a function that I wish to use to resize images:

http://jsfiddle.net/eUurB/

When I run it on document.ready, it has no effect; the image size returned

Answer 1

Here's an ultra-safe way to do it that doesn't require waiting for all the images to load, and takes care of situations where the image may be cached or finished loading before the DOM is ready.

$('#my_img').one('load',function(){
    resizeImgByArea('logo', 50);
})
  .filter(function(){
     return this.complete;
})
  .load();

---

• .one('load',...) removes the handler as soon as it is invoked. You only need it once.

• .filter() will return the image if it was already loaded. If not, it returns no elements.

• .load() will manually invoke the handler. This will only occur if the image was already loaded.

---

So if the image was preloaded before the DOM was ready, we'll invoke its .load() handler manually. If not, its handler will be invoked when it is loaded.