イメージエレメントをnative lazy loadingに対応させる

h-sugawara · Dec 25, 2023 · 170df13 · 170df13
1 parent 8ee4b47
commit 170df13
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 18 deletions.
diff --git a/lib/htmltag.js b/lib/htmltag.js
@@ -27,6 +27,9 @@ function newHtmlImgTag(url, alt, config) {
     if (hasTypeOfProperty(config.className, 'image', 'string') && config.className.image !== '') {
         tagAttrs.class = config.className.image;
     }
+    if (hasTypeOfProperty(config, 'loading', 'string') && ['lazy', 'eager'].includes(config.loading)) {
+        tagAttrs.loading = config.loading;
+    }
 
     return util.htmlTag('img', tagAttrs);
 }

diff --git a/lib/parameters.js b/lib/parameters.js
@@ -1,8 +1,9 @@
 'use strict';
 
 const urlRegex = /^(http|https):\/\//g;
-const targetKeywords = ['_self', '_blank', '_parent', '_top'];
-const relKeywords = ['external', 'nofollow', 'noopener', 'noreferrer', 'opener'];
+const targetKeywords = ['_blank', '_self', '_parent', '_top'];
+const relKeywords = ['nofollow', 'external', 'noopener', 'noreferrer', 'opener'];
+const loadingKeywords = ['lazy', 'eager'];
 
 const CRAWLER_USER_AGENT = 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/112.0.0.0 Safari/537.36';
 
@@ -13,19 +14,21 @@ function parseArgs(args) {
         throw new Error('Scraping target url is not contains.');
     }
 
-    const target = parseOptionalKeywordArg(opts, 'target:', targetKeywords, '_blank');
-    const rel = parseOptionalKeywordArg(opts, 'rel:', relKeywords, 'nofollow');
+    const target = parseOptionalKeywordArg(opts, { argName: 'target:', index: 0 }, targetKeywords);
+    const rel = parseOptionalKeywordArg(opts, { argName: 'rel:', index: 1 }, relKeywords);
+    const loading = parseOptionalKeywordArg(opts, { argName: 'loading:', index: 2 }, loadingKeywords);
 
-    return { url, target, rel };
+    return { url, target, rel, loading };
 }
 
-function parseOptionalKeywordArg(optionals, argName, keywords, defaultValue) {
-    return findOptionalArgs(optionals, argName).filter(arg => keywords.includes(arg)).shift() || defaultValue;
+function parseOptionalKeywordArg(opts, find, keywords, defaultIndex = 0) {
+    return findOptionalArgs(opts, find).filter(arg => keywords.includes(arg)).shift() || keywords[defaultIndex];
 }
 
-function findOptionalArgs(optionals, argName) {
-    const args = optionals.filter(arg => arg.startsWith(argName)).map(arg => arg.replace(argName, ''));
-    return args.length ? args : optionals;
+function findOptionalArgs(opts, find) {
+    const { argName, index } = find;
+    const args = opts.filter(arg => arg.startsWith(argName)).map(arg => arg.replace(argName, ''));
+    return args.length ? args : [opts[index]];
 }
 
 function getFetchOptions(isCrawler) {
@@ -44,12 +47,12 @@ function getFetchOptions(isCrawler) {
 }
 
 module.exports = (args, content, config) => {
-    const { url, target, rel } = parseArgs(args);
+    const { url, target, rel, loading } = parseArgs(args);
     const { class_name: className, description_length: descriptionLength, disguise_crawler: isCrawler } = config;
     const fetchOptions = getFetchOptions(isCrawler);
 
     return {
         scrape: { url, fetchOptions },
-        generate: { target, rel, descriptionLength, className, fallbackText: content },
+        generate: { target, rel, loading, descriptionLength, className, fallbackText: content },
     };
 };
diff --git a/test/htmltag.test.js b/test/htmltag.test.js
@@ -56,20 +56,36 @@ describe('htmlTag', () => {
         const alt = 'alternative text';
         const config = {
             className: { image: 'image-class' },
+            loading: 'lazy',
         };
 
         expect(newHtmlImgTag(url, alt, config)).toEqual(
-            `<img src="${url}" alt="${alt}" class="${config.className.image}">`
+            `<img src="${url}" alt="${alt}" class="${config.className.image}" loading="${config.loading}">`
         );
     });
 
     it('Generate a new html image tag without class name', () => {
         const url = 'http://example.com/';
         const alt = 'alternative text';
-        const config = {};
+        const config = {
+            loading: 'eager',
+        };
+
+        expect(newHtmlImgTag(url, alt, config)).toEqual(
+            `<img src="${url}" alt="${alt}" loading="${config.loading}">`
+        );
+    });
+
+    it('Generate a new html image tag without loading', () => {
+        const url = 'http://example.com/';
+        const alt = 'alternative text';
+        const config = {
+            className: { image: 'image-class' },
+            loading: 'none',
+        };
 
         expect(newHtmlImgTag(url, alt, config)).toEqual(
-            `<img src="${url}" alt="${alt}">`
+            `<img src="${url}" alt="${alt}" class="${config.className.image}">`
         );
     });
 });
diff --git a/test/parameters.test.js b/test/parameters.test.js
@@ -4,7 +4,7 @@ const getParameters = require('../lib/parameters');
 
 describe('parameters', () => {
     it('Specify all arguments explicitly', () => {
-        const args = ['https://example.com', '_self', 'rel:noopener'];
+        const args = ['https://example.com', '_self', 'rel:noopener', 'loading:eager'];
         const fallbackText = 'fallbackText';
         const config = { class_name: { anchor_link: 'link-preview' }, descriptionLength: 140, disguise_crawler: true };
         const { class_name: className, description_length: descriptionLength } = config;
@@ -22,6 +22,7 @@ describe('parameters', () => {
                 generate: {
                     target: args[1],
                     rel: args[2].replace('rel:', ''),
+                    loading: args[3].replace('loading:', ''),
                     descriptionLength,
                     className,
                     fallbackText,
@@ -46,7 +47,7 @@ describe('parameters', () => {
                         },
                     },
                 },
-                generate: { target: '_blank', rel: 'nofollow', descriptionLength, className, fallbackText },
+                generate: { target: '_blank', rel: 'nofollow', loading: 'lazy', descriptionLength, className, fallbackText },
             }
         );
     });
@@ -60,7 +61,7 @@ describe('parameters', () => {
         expect(getParameters(args, fallbackText, config)).toEqual(
             {
                 scrape: { url: args[0], fetchOptions: {} },
-                generate: { target: '_blank', rel: 'nofollow', descriptionLength, className, fallbackText },
+                generate: { target: '_blank', rel: 'nofollow', loading: 'lazy', descriptionLength, className, fallbackText },
             }
         );
     });