このブラウザでは loading 属性が使えます。

  1. <body>
  2.   <p id="message">このブラウザでは loading 属性が<span id="availability"></span></p>
  3.   <img loading="lazy" src="/images/sample_01.jpg" width="960" height="593" alt=""> 
  4.   <img loading="lazy" src="/images/sample_02.jpg" width="960" height="593" alt=""> 
  5.   <img loading="lazy" src="/images/sample_03.jpg" width="960" height="593" alt=""> 
  6.   <img loading="lazy" src="/images/sample_04.jpg" width="960" height="593" alt=""> 
  7.   <img loading="lazy" src="/images/sample_05.jpg" width="960" height="593" alt=""> 
  8.   <img loading="lazy" src="/images/sample_06.jpg" width="960" height="593" alt=""> 
  9.   <img loading="lazy" src="/images/sample_07.jpg" width="960" height="593" alt=""> 
  10.   <img loading="lazy" src="/images/sample_08.jpg" width="960" height="593" alt=""> 
  11.   <img loading="lazy" src="/images/sample_09.jpg" width="960" height="593" alt=""> 
  12.   <img loading="lazy" src="/images/sample_10.jpg" width="960" height="593" alt=""> 
  13.   <img loading="lazy" src="/images/large/sample_11.jpg" 
  14.        srcset="/images/small/sample_11.jpg 640w, 
  15.                     /images/medium/sample_11.jpg 960w, 
  16.                     /images/large/sample_11.jpg 1200w" 
  17.        sizes="100vw"
  18.        alt=""> 
  19.   <picture>
  20.     <source media="(min-width: 1200px)" srcset="/images/large/sample_12.jpg">
  21.     <img loading="lazy" src="/images/sample_12.jpg" alt="">
  22.   </picture> 
  23. </body>
  1. <script>
  2. const message = document.getElementById('message');
  3. const span_elem = document.getElementById('availability');
  4.  
  5. if ('loading' in HTMLImageElement.prototype)  {
  6.   span_elem.textContent = "使えます。";
  7.   message.style.setProperty('color', 'green');
  8. }else{
  9.   span_elem.textContent = "使えません。";
  10.   message.style.setProperty('color', 'red');
  11. }
  12. </script>