title: jQuery .load(); not working with image
body: <p>I am trying to create a browser plug-in which keeps <code>.gif</code>s faded out until they are fully loaded. Once the images are loaded, they fade in.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;img src="http://media.tumblr.com/6ced3000389da1433b13c8a18bfeaf75/tumblr_inline_muf6jmZS8m1rc3mra.gif" alt=""&gt;
  
  &lt;img src="http://4.bp.blogspot.com/-fYJrkNWec08/T9EYOmNGPNI/AAAAAAAAC04/UtdRRM8a3hc/s640/cat-fat-dancing-cat-gif.gif" alt=""&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$("img[src$='gif']").each( function() {
      $(this).css({'opacity': '0.05'});
      $(this).load( function() {
          $(this).fadeIn();
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/WMJ72/" rel="nofollow">JS Fiddle</a></p>
  
  <p>However, the images don't fade in as the <code>.load</code> function is never activated.</p>
  
  <p>What am I doing wrong? The jQuery docs do mention some cross browser issues, but this was tested in the latest version of both Chrome and Safari and both failed.</p>