title: Use Javascript to write src attribute as data-src, as page is loading
body: <blockquote>
    <p><strong>Background:</strong> Back in December I wanted my (custom) PHP page-building
    engine to build a page one-way if the User Agent (UA) could handle
    Javascript and a different way if the UA could not. To achieve this, I
    needed to learn:</p>
    
    <p><em>How to detect UA Javascript capability via PHP, prior to PHP building the page on-the-fly:</em>
    <a href="https://stackoverflow.com/questions/27412949/detecting-javascript-in-php-before-php-builds-page">Detecting javascript in PHP, before PHP builds page</a></p>
    
    <p>Thanks to some very helpful guidance from @skobaljic, @Abhi Beckert
    and @GolezTrol, I learned that we can use Javascript to place
    a session cookie which PHP will be able to query on all subsequent page
    loads. Consequently, for every page after the first one, PHP will
    <em>know</em> whether the UA is Javascript-capable or not</p>
    
    <p>So far, so good. Now I have reached the stage where I am no longer
    building pages with PHP on-the-fly but pre-generating them and uploading
    them to the server as static HTML documents.</p>
    
    <p>If you're still with me, you'll have guessed correctly this means I am
    currently needing to pre-generate <strong>two</strong> static documents for each page -
    <em>one</em> for the non-JS-capable UAs and <em>one</em> for the JS-capable UAs.
    This isn't really ideal, hence my question below.</p>
  </blockquote>
  
  <p>On the face of it, this looks like it ought to be a straightforward problem.</p>
  
  <p>For Javascript-non-capable UAs, I want to build a document which contains lines like this:</p>
  
  <pre><code>&lt;img src="/myfolder/myimage.png" alt="My Image" /&gt;
  </code></pre>
  
  <p>For Javascript capable UAs, I want to build the same document which contains lines like this:</p>
  
  <pre><code>&lt;img data-src="/myfolder/myimage.png" alt="My Image" /&gt;
  </code></pre>
  
  <p><em>(for those who are curious, a javascript after <code>onload</code> converts all the data-src properties into src properties, following which many tens of server round-trips ensue but - crucially - <strong>only after</strong> the page has already substantially loaded).</em></p>
  
  <p>I have already achieved this via PHP and a session cookie (see <strong>Background</strong> above), but now, if it's possible, I want to execute the whole thing on the front-end.</p>
  
  <p>How can I write an attribute into the <code>&lt;img /&gt;</code> elements in the DOM as <code>src</code> by default but, additionally, (if javascript is available) prefix that attribute with <code>data-</code> so that it reads as <code>data-src</code>...</p>
  
  <p>... such that...</p>
  
  <p><strong>[IMPORTANT BIT]</strong></p>
  
  <p><strong><em>If</em></strong> the UA is javascript-capable it will automatically and instantaneously write all instances of <code>src</code> as <code>data-src</code> <em>as the page is being downloaded by the UA</em>, so that after <code>onload</code> a javascript can then re-write all those instances of <code>data-src</code> as <code>src</code> again.</p>