feat: add lazyload to iframe related tags (#3798)

- iframe
- jsfiddle
- vimeo
- youtube

lib/plugins/tag/iframe.js

@@ -12,7 +12,7 @@ function iframeTag(args, content) {
   const width = args[1] && args[1] !== 'default' ? args[1] : '100%';
   const height = args[2] && args[2] !== 'default' ? args[2] : '300';
 
-  return `<iframe src="${url}" width="${width}" height="${height}" frameborder="0" allowfullscreen></iframe>`;
+  return `<iframe src="${url}" width="${width}" height="${height}" frameborder="0" loading="lazy" allowfullscreen></iframe>`;
 }
 
 module.exports = iframeTag;

lib/plugins/tag/jsfiddle.js

@@ -14,7 +14,7 @@ function jsfiddleTag(args, content) {
   const width = args[3] && args[3] !== 'default' ? args[3] : '100%';
   const height = args[4] && args[4] !== 'default' ? args[4] : '300';
 
-  return `<iframe scrolling="no" width="${width}" height="${height}" src="//jsfiddle.net/${id}/embedded/${tabs}/${skin}" frameborder="0" allowfullscreen></iframe>`;
+  return `<iframe scrolling="no" width="${width}" height="${height}" src="//jsfiddle.net/${id}/embedded/${tabs}/${skin}" frameborder="0" loading="lazy" allowfullscreen></iframe>`;
 }
 
 module.exports = jsfiddleTag;

lib/plugins/tag/vimeo.js

@@ -10,7 +10,7 @@
 function vimeoTag(args, content) {
   const id = args[0];
 
-  return `<div class="video-container"><iframe src="//player.vimeo.com/video/${id}" frameborder="0" allowfullscreen></iframe></div>`;
+  return `<div class="video-container"><iframe src="//player.vimeo.com/video/${id}" frameborder="0" loading="lazy" allowfullscreen></iframe></div>`;
 }
 
 module.exports = vimeoTag;

lib/plugins/tag/youtube.js

@@ -10,7 +10,7 @@
 function youtubeTag(args, content) {
   const id = args[0];
 
-  return `<div class="video-container"><iframe src="//www.youtube.com/embed/${id}" frameborder="0" allowfullscreen></iframe></div>`;
+  return `<div class="video-container"><iframe src="//www.youtube.com/embed/${id}" frameborder="0" loading="lazy" allowfullscreen></iframe></div>`;
 }
 
 module.exports = youtubeTag;

test/scripts/tags/iframe.js

@@ -13,6 +13,7 @@ describe('iframe', () => {
     $('iframe').attr('height').should.eql('300');
     $('iframe').attr('frameborder').should.eql('0');
     $('iframe').attr('allowfullscreen').should.eql('');
+    $('iframe').attr('loading').should.eql('lazy');
   });
 
   it('width', () => {
@@ -23,6 +24,7 @@ describe('iframe', () => {
     $('iframe').attr('height').should.eql('300');
     $('iframe').attr('frameborder').should.eql('0');
     $('iframe').attr('allowfullscreen').should.eql('');
+    $('iframe').attr('loading').should.eql('lazy');
   });
 
   it('height', () => {
@@ -33,5 +35,6 @@ describe('iframe', () => {
     $('iframe').attr('height').should.eql('600');
     $('iframe').attr('frameborder').should.eql('0');
     $('iframe').attr('allowfullscreen').should.eql('');
+    $('iframe').attr('loading').should.eql('lazy');
   });
 });

test/scripts/tags/vimeo.js

@@ -12,5 +12,6 @@ describe('vimeo', () => {
     $('iframe').attr('src').should.eql('//player.vimeo.com/video/foo');
     $('iframe').attr('frameborder').should.eql('0');
     $('iframe').attr('allowfullscreen').should.eql('');
+    $('iframe').attr('loading').should.eql('lazy');
   });
 });

test/scripts/tags/youtube.js

@@ -12,5 +12,6 @@ describe('youtube', () => {
     $('iframe').attr('src').should.eql('//www.youtube.com/embed/foo');
     $('iframe').attr('frameborder').should.eql('0');
     $('iframe').attr('allowfullscreen').should.eql('');
+    $('iframe').attr('loading').should.eql('lazy');
   });
 });