loading attribute Sample 1

<body>
  <p id="message">このブラウザでは loading 属性が<span id="availability"></span></p>
  <img loading="lazy" src="/images/sample_01.jpg" width="960" height="593" alt=""> 
  <img loading="lazy" src="/images/sample_02.jpg" width="960" height="593" alt=""> 
  <img loading="lazy" src="/images/sample_03.jpg" width="960" height="593" alt=""> 
  <img loading="lazy" src="/images/sample_04.jpg" width="960" height="593" alt=""> 
  <img loading="lazy" src="/images/sample_05.jpg" width="960" height="593" alt=""> 
  <img loading="lazy" src="/images/sample_06.jpg" width="960" height="593" alt=""> 
  <img loading="lazy" src="/images/sample_07.jpg" width="960" height="593" alt=""> 
  <img loading="lazy" src="/images/sample_08.jpg" width="960" height="593" alt=""> 
  <img loading="lazy" src="/images/sample_09.jpg" width="960" height="593" alt=""> 
  <img loading="lazy" src="/images/sample_10.jpg" width="960" height="593" alt=""> 
  <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=""> 
  <picture>
    <source media="(min-width: 1200px)" srcset="/images/large/sample_12.jpg">
    <img loading="lazy" src="/images/sample_12.jpg" alt="">
  </picture> 
</body>

<script>
const message = document.getElementById('message');
const span_elem = document.getElementById('availability');

if ('loading' in HTMLImageElement.prototype)  {
  span_elem.textContent = "使えます。";
  message.style.setProperty('color', 'green');
}else{
  span_elem.textContent = "使えません。";
  message.style.setProperty('color', 'red');
}
</script>