title: On dom ready, get all data-src from <img>'s and set them in the src attribute
body: <p>In a page I have this:</p>
  
  <pre><code>&lt;figure&gt;&lt;img src="" data-src="img1.png"&gt;&lt;/figure&gt;
  &lt;figure&gt;&lt;img src="" data-src="img2.png"&gt;&lt;/figure&gt;
  &lt;figure&gt;&lt;img src="" data-src="img3.png"&gt;&lt;/figure&gt;
  &lt;figure&gt;&lt;img src="" data-src="img4.png"&gt;&lt;/figure&gt;
  </code></pre>
  
  <p>and goes on.</p>
  
  <p>I am trying to make an async load without using a jquery plugin and make it as simple as possible.</p>
  
  <p>So I thought, when the dom is ready and the page is fully loaded, set the data-src to the src.</p>
  
  <p>If I do this: <code>console.log($('figure img').attr('data-src'))</code> I get only the first image. so it gives me result: <code>img1.png</code></p>
  
  <p>So how can I say, <strong>when dom ready all the figure > img > data-src to be set as src for that img.</strong></p>
  
  <p>So from this:</p>
  
  <pre><code>&lt;figure&gt;&lt;img src="" data-src="img1.png"&gt;&lt;/figure&gt;
  &lt;figure&gt;&lt;img src="" data-src="img2.png"&gt;&lt;/figure&gt;
  &lt;figure&gt;&lt;img src="" data-src="img3.png"&gt;&lt;/figure&gt;
  &lt;figure&gt;&lt;img src="" data-src="img4.png"&gt;&lt;/figure&gt;
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>&lt;figure&gt;&lt;img src="img1.png"&gt;&lt;/figure&gt;
  &lt;figure&gt;&lt;img src="img2.png"&gt;&lt;/figure&gt;
  &lt;figure&gt;&lt;img src="img3.png"&gt;&lt;/figure&gt;
  &lt;figure&gt;&lt;img src="img4.png"&gt;&lt;/figure&gt;
  </code></pre>