Lazy loading images if JS enabled, loading images normally if not

JavaScript
16

I checked the following which looks as though I disregarded and just used the JavaScript script:

https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/

and noticed the following must be added:

<noscript>
Allowed. Can be used anywhere in the document. If specified, the content inside the <noscript> element displays if JavaScript is disabled by the user.

So I modified the following PHP script and added <noscript>

if(0):
  // OLD SCRIPT THAT FAILS WHEN JavaScript DISABLED
$result = <<< ____EOT
  <div class="fll tac">
         <a href="$url" title="$title"> 
          <amp-img 
            src="$thumb" 
            {$dims[3]} 
            alt="$title"
          />
         </a>
         <br>
         $title 
        </div>
____EOT;

else:
// NOW WORKS OK EVEN IF JavasScript IS DISABLED
   $result = <<< ____EOT
    <div class="fll tac">
     <a href="$url" title="$title"> 
      <amp-img 
        src="$thumb" 
        {$dims[3]} 
        alt="$title"
      />
      <noscript>
        <img src="$thumb" {$dims[3]} alt="AMP">
      </noscript>
      </a>
      <br>
      $title 
    </div>
____EOT;

endif;

To test I disabled FireFox’s JavaScript:

  1. In Firefox, type “about:config” in the address bar, then press “Enter“.
  2. Select the “I accept the risk!” button.
  3. Type “javascript” in the “Search” box.
  4. Double-click the “javascript. enabled” line to toggle the setting between “true” and “false” as desired.

Online Test

Try the following where the trailing numeric parameter is the number of thumbnails to display - there is a couple of thousand and takes an extra ten seconds to display with JavaScript disabled :frowning:

https://www.johns-jokes.com/pictures-amp/10000