title: javascript lazy loading the progressive enhancement way?
body: <p>I'm building a website for a gallery owner that has a lot of images per webpage.
  Therefore I want to lazy load the images on the webpage, making the initial load
  less heavy. However, I would like to implement this in a "progressive enhancement" way.</p>
  
  <p>I've found a lot of lazy loading methods but they all require fiddling with the html code
  in such a way that the webpage would be useless with javascript turned off. (eg. the <code>src</code> attribute of the <code>img</code> tags remains unset until the images is lazy loaded).</p>
  
  <p>To implement a lazy loading method progressivly I think one would need the following:</p>
  
  <ol>
  <li>prevent the browser from fetching the images, even though thers are on the page,
  but only do this when javascript is on (so on non-javascript browsers, the images still 
  load as normal). This should be done without altering the html.</li>
  <li>save the <code>src</code> attribute in a <code>data-src</code> attribute</li>
  <li>sequentually load the images when scrolling down</li>
  </ol>
  
  <p>Of these three steps the first one seems the hardest one. Even <a href="https://stackoverflow.com/questions/1667868/prevent-images-from-loading">this stackoverflow discussion</a> did not provide an answer that doesn't ruin progressive enhancement.</p>
  
  <p>Has anyone got any ideas?</p>