Lazy loading of images with graceful degradation (JavaScript)
<p>Consider a HTML page with a bunch of  tags each with their own content. I want to transform each  tag to a slide in a slideshow powered by JavaScript. Each  tag can contain images and they should be lazy loaded in this slideshow. I don't want all images to load at once.</p>

<p>On the other hand, users with no JavaScript enabled and search engines should just the see markup and all the images. How do I avoid images from loading when JavaScript is enabled, and how do I make sure images are loaded when no JavaScript is enabled?</p>

<p>One way would be to replace all images with this format:</p>

<pre><code>&lt;img src="" data-src="myimage.png"&gt;
</code></pre>

<p>The problem with that solution is there's no graceful degradation.</p>

<p>Instead, I have to do:</p>

<pre><code>&lt;img src="myimage.png"&gt;
</code></pre>

<p>The problem with that is that you can't prevent the browser from loading all of the images in the HTML page. I've tried to modify the HTML in several ways when the document is ready. For example, replace all src attributes in images with data-src, empty the entire body and so on.</p>

<p>Do I really have to sacrifice graceful degradation?</p>

<p>Thanks in advance.</p>
