title: lazy load? / load images only when visible in viewport
body: <p>I have a long list of <code>&lt;div&gt;</code>s that contain <code>&lt;img /&gt;</code>s and I don't want the page to be slowed down by the loading of all the images.</p>
  
  <p>So, right now, I have the url to all the images in the <code>data-src</code> attribute and the <code>src</code> attribute is empty.</p>
  
  <p>How can I load the image, move the contents of the <code>data-src</code> to <code>src</code> when that div or img is visible in the viewport with javascript / jquery?</p>
  
  <p>By visible in the viewport, I mean when the user has scrolled to those images.</p>
  
  <p>All the images are in divs, which are in a vertical list.</p>