title: Javascript lazy load images by id
body: <p>I have a page with a very long list of images and I'm looking to lazy load them. But instead of loading the images when they appear in the viewport, I want to load them in order of <code>id</code> when the page is ready. Is there any way to do this?</p>
  
  <p>Here is my markup. My goal would be to load realimg1, realimg2, realimg3, etc in order.</p>
  
  <pre><code>&lt;img src="loading.png" width="300" height="200" id="id1" data-src="realimg1.png"&gt;
  &lt;img src="loading.png" width="300" height="200" id="id2" data-src="realimg2.png"&gt;
  &lt;img src="loading.png" width="300" height="200" id="id3" data-src="realimg3.png"&gt;
  &lt;img src="loading.png" width="300" height="200" id="id4" data-src="realimg4.png"&gt;
  &lt;img src="loading.png" width="300" height="200" id="id5" data-src="realimg5.png"&gt;
  </code></pre>
  
  <p>Right now, I'm using <a href="http://www.appelsiini.net/projects/lazyload" rel="nofollow">this plugin</a> just lazy loading images by replacing the <code>src</code> with <code>data-src</code> when the image come into the viewport. How would I do the same thing but do it on load in order of <code>id</code> instead of when they appear in the viewport?</p>