running jquery on images after page load

I have written a jQuery image resize script that works fine when the images are clicked using the handler, $('img').click (function(){. (see example here)

However I want to set it to run as soon as the page is loaded but $('img').load(function(){ doesn't work. (see exam开发者_如何学运维ple here) I'm assuming it's because it's running the script after the DOM has loaded but not the images. But If I'm honest I don't know.

You could do:

$(document).ready(function() {
  $('img').each(function() {
    // do your magic here
  });
});

How about just running it under the normal $(document).ready() function? This will run when the page is fully loaded.

You can't use $(document).ready because that only takes into account that the DOM is loaded. You need to use

$(window).load(
  function() {
  }
);