<img src="/images/sample_01.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_02.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_03.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_04.jpg" 
     width="960" height="593" alt=""> 
<!--  data-src と class="lazyload" の指定なし -->
<img loading="lazy"
     src="/images/sample_05.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_06.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_07.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_08.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_09.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_10.jpg" 
     width="960" height="593" alt=""> 
<!-- data-src、data-srcset、 class="lazyload" の指定なし -->
<img loading="lazy" 
 src="/images/large/sample_11.jpg" 
 srcset="/images/small/sample_11.jpg 640w, /images/medium/sample_11.jpg 960w, /images/large/sample_11.jpg 1200w" 
 sizes="100vw"
 alt=""> 
<!-- data-src、data-srcset、 class="lazyload" の指定なし -->  
<picture>
  <source 
  media="(min-width: 1200px)" 
  srcset="/images/large/sample_12.jpg">
  <img loading="lazy" 
    src="/images/sample_12.jpg"
    alt="">
</picture>  

//loading 属性がサポートされていれば
if ('loading' in HTMLImageElement.prototype) { 
  //loading 属性に lazy が指定されている img 要素
  const images = document.querySelectorAll('img[loading="lazy"]');
  //data-srcset が指定されている img 要素
  const img_srcset = document.querySelectorAll("img[data-srcset]");
  //data-srcset が指定されている source 要素
  const sources = document.querySelectorAll("source[data-srcset]");

  //loading="lazy" が設定されている要素があれば
  if(images.length > 0) {
    images.forEach(img => {
    //data-src 属性が設定されていれば img 要素の src 属性の値に data-src 属性の値を設定
      if(img.dataset.src) {
         img.src = img.dataset.src;
      }
    });
  }
  //data-srcset が指定されている img 要素があれば
  if(img_srcset.length > 0) {
    img_srcset.forEach(img_srcset => {
      //img 要素の srcset 属性の値に data-srcset 属性の値を設定
      img_srcset.srcset = img_srcset.dataset.srcset;
    });
  }
  //picture 要素
  //data-srcset が指定されている source 要素があれば
  if(sources.length > 0){
    sources.forEach(source => {
      //source 要素の srcset 属性の値に data-srcset 属性の値を設定
      source.srcset = source.dataset.srcset;
    });
  }
} else {
  //loading 属性がサポートされていない場合は動的に lazysizes ライブラリーを読み込む
  // script 要素を生成
  const script = document.createElement('script');
  //ダウンロードしてある lazysizes を script 要素の src に指定
  script.src = 'lazysizes.min.js';
  //script 要素を body に追加
  document.body.appendChild(script);
}