Disable lazy loading for first image on page

CHANGELOG.md

@@ -11,6 +11,7 @@ For detailed information check [Blogophon's releases on Github](https://github.c
 * 🎁 Changed code highlighting for Bash prompt
 * 🎁 Add additional `class` to `td` with a tag inside
 * 🎁 Improve accessibility
+* 🎁 Disable lazy loading for first image/iFrame on page
 
 2.1.7
 -----

htdocs/themes/default/templates/index.html

@@ -97,7 +97,7 @@ <h2>
                   </h2>
                 </header>
                 <div itemprop="description" class="p-summary">
-                  {{{lazyloadAttributes htmlTeaser "lazy"}}}
+                  {{{lazyloadAttributes htmlTeaser "lazy" @first}}}
                 </div>
                 {{#if meta.hasNoExtraDescription}}
                   {{#if meta.hasExternalLink}}

htdocs/themes/default/templates/post.html

@@ -90,7 +90,7 @@ <h1>
               </h1>
             </header>
             <div{{#ifEquals meta.Schema 'http://schema.org/BlogPosting'}} itemprop="articleBody"{{/ifEquals}} class="e-content">
-              {{{lazyloadAttributes html "lazy"}}}
+              {{{lazyloadAttributes htmlTeaser "lazy" 1}}}
 
               {{#if meta.RatingObj}}
                   <p itemscope itemtype="http://schema.org/Rating">

lib/helpers/blogophon-handlebars-quoters.js

@@ -153,12 +153,19 @@ const blogophonHandlebarsQuoters = {
    * May be combined with `lazyloadImages` method.
    * Do not use this technique for AMP pages.
    * @see    https://addyosmani.com/blog/lazy-loading/
-   * @param  {String} text       [description]
-   * @param  {String} loading    Attribute value, defaults to 'lazy'
-   * @return {String}            [description]
+   * @param  {String}  text       [description]
+   * @param  {String}  loading    Attribute value, defaults to 'lazy'
+   * @param  {Boolean} butFirst   Do not convert first hit, defaults to false
+   * @return {String}             [description]
    */
-  lazyloadAttributes: function(text, loading = 'lazy') {
-    return text.replace(/(<(?:img|iframe) )/g, '$1loading="' + loading + '" ');
+  lazyloadAttributes: function(text, loading = 'lazy', butFirst = false) {
+    return text.replace(/(<(?:img|iframe) )/g, function(all) {
+      if (butFirst) {
+        butFirst = false;
+        return all;
+      }
+      return all + 'loading="' + loading + '" ';
+    });
   },
 
   /**

test/blogophon-handlebars-quoters.js

@@ -43,6 +43,12 @@ describe('Blogophon Handlebars Quoters', function() {
 
     outputHtml = blogophonHandlebarsQuoter.lazyloadAttributes(inputHtml, 'eager');
     assert.strictEqual(outputHtml.match(/ loading="eager"/g).length,  2);
+
+    outputHtml = blogophonHandlebarsQuoter.lazyloadAttributes(inputHtml, 'lazy', true);
+    assert.strictEqual(outputHtml.match(/ loading="lazy"/g).length,  1);
+
+    outputHtml = blogophonHandlebarsQuoter.lazyloadAttributes(inputHtml, 'lazy', 1);
+    assert.strictEqual(outputHtml.match(/ loading="lazy"/g).length,  1);
   });
 
   it('must properly identify Gopher links', function() {