title: Lazy Loading HTML5 picture element
body: <p>I have been searching (unsuccessfully) for a reliable method to lazy load images while using the HTML5 spec for <code>&lt;picture&gt;</code>. Most solutions/plugins out there currently rely on using <code>data-</code> attributes. I could be wrong, but it doesn't seem this method will work in conjunction w/ <code>&lt;picture&gt;</code>.</p>
  <p>I'm really just looking to be pointed in the right direction. If anyone has a solution that they're currently using, I'd love to see. Thanks!</p>
  <p>Here is standard markup per the HTML5 spec:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;picture width=&quot;500&quot; height=&quot;500&quot;&gt;
      &lt;source media=&quot;(min-width: 45em)&quot; src=&quot;large.jpg&quot;&gt;
      &lt;source media=&quot;(min-width: 18em)&quot; src=&quot;med.jpg&quot;&gt;
      &lt;source src=&quot;small.jpg&quot;&gt;
      &lt;img src=&quot;small.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/picture&gt;
  </code></pre>