title: Speed up page load by deferring images
body: <p>I am creating a page which will contain a lot of large sized images, so naturally I want to make sure the page loads without too much trouble. I read this article here <a href="http://24ways.org/2010/speed-up-your-site-with-delayed-content" rel="noreferrer">http://24ways.org/2010/speed-up-your-site-with-delayed-content</a></p>
  
  <p>The method of deferring is as follows (pulled from page, don't mind the URL)</p>
  
  <pre><code>&lt;div&gt;
      &lt;h4&gt;
          &lt;a href="http://allinthehead.com/" data-gravatar-hash="13734b0cb20708f79e730809c29c3c48"&gt;
              Drew McLellan
          &lt;/a&gt;
      &lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then later a snippet of js takes care of the image loading</p>
  
  <pre><code>$(window).load(function() {
      $('a[data-gravatar-hash]').prepend(function(index){
          var hash = $(this).attr('data-gravatar-hash')
          return '&lt;img width="100" height="100" alt="" src="http://www.gravatar.com/avatar.php?size=100&amp;amp;gravatar_id=' + hash + '"&gt;'
      });
  });
  </code></pre>
  
  <p>I don't plan on doing this for every image but definitely for some image which I don't need it to show up at page load time.</p>
  
  <p>Is this the best way to go or are there better ways to achieve faster page load by deferring images?</p>
  
  <p>Thanks</p>