2

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 is '0' (You may notice that it does work in the fiddle... I'm not sure what's causing this inconsistencty to be honest, but on my test site it's most definitely returning height and width of '0'.

Is this expected behaviour? If so, how could I make a simple listener for when images have width?

Damon
  • 10,493
  • 16
  • 86
  • 144
  • 1
    In your fiddle you are calling the function in onLoad. I imagine you are calling it in onReady in your actual site. This SO question discusses onReady/onLoad in respect to images - http://stackoverflow.com/questions/2174119/jquery-load-event-on-images – mrtsherman Sep 28 '11 at 18:37
  • so load is actually after ready? I kinda thought load was when it started loading and ready was when it was done loading. – Damon Sep 28 '11 at 18:54
  • See the jQuery docs for difference between load and onready. Onready fires when the DOM has finished loading. http://docs.jquery.com/Tutorials:Introducing_$(document).ready() – mrtsherman Sep 28 '11 at 19:42

3 Answers3

5

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.

user113716
  • 318,772
  • 63
  • 451
  • 440
2

Images are not loaded at document.ready time. Instead use the .load() method of jQuery.

$('#logo').load( function() {
    resizeImgByArea('logo', 500);
});
sdleihssirhc
  • 42,000
  • 6
  • 53
  • 67
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • 1
    @sdleihssirhc: jQuery likes to give unrelated behavior to the same method name based on arguments passed. This is the *load-event* version of `.load()`. Just like *toggle* vs. *toggle-event*. – user113716 Sep 28 '11 at 18:31
  • @sdleihssirhc - Good point. I just know that I picked this up somewhere and it works. Once the image finishes loading it fires the callback. I don't actually know the 'why' it works though. =(. Poor programmer's response I know. – mrtsherman Sep 28 '11 at 18:33
  • @sdleihssirhc - thank-you for the edit. Ӫ_._Ӫ and sdleihssirhc pointd out and fixed an important aspect of this answer. See the difference between http://api.jquery.com/load-event/ and http://api.jquery.com/load/ – mrtsherman Sep 28 '11 at 18:42
2

From the jQuery docs on the jQuery(callback) method:

This function behaves just like $(document).ready()

And when we go to the docs on $(document).ready(), we find this:

Description: Specify a function to execute when the DOM is fully loaded.

So it's actually doing what it's supposed to. It isn't waiting for other resources (such as images) to load; it's executing your callback as soon as the DOM is ready.

You could get that <img> element and attach a load event listener, but what if the image really did finish loading, before you could attach it? Your callback will never be executed.

It's not pretty, but I think the safest thing you can do is just wait for the entire page to finish loading:

$(window).load(function () {
    resizeImgByArea('logo', 50);
});
sdleihssirhc
  • 42,000
  • 6
  • 53
  • 67