diff --git a/CHANGELOG.md b/CHANGELOG.md index d8260d8..5636a37 100644 --- a/CHANGELOG.md +++ b/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 ----- diff --git a/htdocs/themes/default/templates/index.html b/htdocs/themes/default/templates/index.html index 7cb97fc..dcdb9cc 100644 --- a/htdocs/themes/default/templates/index.html +++ b/htdocs/themes/default/templates/index.html @@ -97,7 +97,7 @@

- {{{lazyloadAttributes htmlTeaser "lazy"}}} + {{{lazyloadAttributes htmlTeaser "lazy" @first}}}
{{#if meta.hasNoExtraDescription}} {{#if meta.hasExternalLink}} diff --git a/htdocs/themes/default/templates/post.html b/htdocs/themes/default/templates/post.html index 14be7f8..4621556 100644 --- a/htdocs/themes/default/templates/post.html +++ b/htdocs/themes/default/templates/post.html @@ -90,7 +90,7 @@

- {{{lazyloadAttributes html "lazy"}}} + {{{lazyloadAttributes htmlTeaser "lazy" 1}}} {{#if meta.RatingObj}}

diff --git a/lib/helpers/blogophon-handlebars-quoters.js b/lib/helpers/blogophon-handlebars-quoters.js index ca6f6be..4733c4b 100644 --- a/lib/helpers/blogophon-handlebars-quoters.js +++ b/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 + '" '; + }); }, /** diff --git a/test/blogophon-handlebars-quoters.js b/test/blogophon-handlebars-quoters.js index e16f54e..1d49fba 100644 --- a/test/blogophon-handlebars-quoters.js +++ b/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() {