Web Design Leaves

if ('loading' in HTMLImageElement.prototype) {
  // loading 属性をサポートしているブラウザの場合
} else {
  // loading 属性をサポートしていないブラウザの場合
}

<!--遅延読み込みなし--> 
<img src="/images/sample_01.jpg" width="960" height="593" alt="">
<!--遅延読み込みする画像（見やすいように改行しています）-->  
<img 
  loading="lazy" 
  class="lazyload" 
  data-src="/images/sample_02.jpg" 
  width="960" height="593" 
  alt=""> 

<img loading="lazy" class="lazyload" 
     data-src="/images/large/sample_11.jpg" 
     data-srcset="/images/small/sample_11.jpg 640w, 
                  /images/medium/sample_11.jpg 960w, 
                  /images/large/sample_11.jpg 1200w" 
     sizes="100vw"
     alt=""> 
<picture>
  <source media="(min-width: 1200px)" data-srcset="/images/large/sample_12.jpg">
  <img loading="lazy" class="lazyload" data-src="/images/sample_12.jpg" alt="">
</picture> 

<script>
if ('loading' in HTMLImageElement.prototype) {
  //loading 属性がサポートされている場合
  //loading 属性に lazy が指定されている img 要素
  const images = document.querySelectorAll('img[loading="lazy"]');
  images.forEach(img => {
    //img 要素の src 属性の値に data-src 属性の値を設定
    img.src = img.dataset.src;
  });
  //img 要素で srcset 属性を使っている場合（data-srcset が指定されている img 要素）
  const img_srcset = document.querySelectorAll("img[data-srcset]");
  img_srcset.forEach(img_srcset => {
    //img 要素の srcset 属性の値に data-srcset 属性の値を設定
    img_srcset.srcset = img_srcset.dataset.srcset;
  });
  
  //picture 要素
  const sources = document.querySelectorAll("source[data-srcset]");
  sources.forEach(source => {
    //source 要素の srcset 属性の値に data-srcset 属性の値を設定
    source.srcset = source.dataset.srcset;
  });
} else {
  //loading 属性がサポートされていない場合
  // 動的に lazysizes ライブラリーを読み込む
  const script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js';
  //script.src = 'path/to/lazysizes.min.js';  //ダウンロードしてある場合
  document.body.appendChild(script);
}
</script>
</body>

<!--以下の画像は遅延読み込みなし--> 
<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/large/sample_11.jpg" 
 srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 640w"
 data-srcset="/images/small/sample_11.jpg 640w, 
               /images/medium/sample_11.jpg 960w, 
              /images/large/sample_11.jpg 1200w" 
 sizes="100vw"
 alt=""> 
  
  <picture>
    <source 
    media="(min-width: 1200px)" 
    srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    data-srcset="/images/large/sample_12.jpg">
    <img loading="lazy" 
      class="lazyload"
      src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
      data-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);
} 

<script src="lazysizes.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js"></script>

npm install lazysizes --save

import 'lazysizes';
// 以下はプラグインをインポートする場合の例
import 'lazysizes/plugins/parent-fit/ls.parent-fit';

<img data-src="image.jpg" class="lazyload" alt="">

<img data-src="image.jpg"
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
  class="lazyload" alt=""> 

<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

<img class="lazyload fade-in-bottom" data-src="/images/01.jpg" width="960" height="593" alt=""> 

.fade-in-bottom {
  opacity: 0;
  transform: translate(0, 100px);
  transition: 2s;
}
.fade-in-bottom.lazyloaded {
  transform: translate(0, 0);
  opacity: 1;
}
  

<img class="lazyload fade-in-left" data-src="/images/large/11.jpg" 
     data-srcset="/images/small/11.jpg 640w, 
                  /images/medium/11.jpg 960w, 
                  /images/large/11.jpg 1200w" 
     data-sizes="auto"
     alt=""> 
<picture>
  <source media="(min-width: 1200px)" data-srcset="/images/large/12.jpg">
  <img class="lazyload zoom-in" data-src="/images/12.jpg" alt="">
</picture> 

.fade-in-left {
  opacity: 0;
  transform: translate(-100px, 0);
  transition: 2s;
}
.fade-in-left.lazyloaded {
  transform: translate(0, 0);
  opacity: 1;
}
  
.zoom-in {
  opacity: 0;
  transform: scale(0.7);
  transition: 3s;
}
.zoom-in.lazyloaded {
  transform: scale(1);
  opacity: 1;
}

<!--  lazysizes の読み込み -->
<script src="lazysizes.min.js"></script>
<!--  unveilhooks プラグインの読み込み -->
<script src="ls.unveilhooks.min.js"></script>

<!--  lazysizes の読み込み -->
<script src="lazysizes.min.js"></script>
<!-- CDN 経由での unveilhooks プラグインの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/plugins/unveilhooks/ls.unveilhooks.min.js"></script>

<div class="bgimg lazyload" data-bg="/images/sample.jpg"></div>

.bgimg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:600px;
  max-width: 960px;
  margin: 50px 0;
}

.bgimg {
  background-image: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");    
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:600px;
  max-width: 960px;
  margin: 50px 0;
}

<script src="lazysizes-intersection.js"></script>