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

  1. <img src="/images/sample_01.jpg" width="960" height="593" alt="">
  2. <img loading="lazy" class="lazyload"
  3. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  4. data-src="/images/sample_02.jpg"
  5. width="960" height="593" alt="">
  6. <img loading="lazy" class="lazyload"
  7. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  8. data-src="/images/sample_03.jpg"
  9. width="960" height="593" alt="">
  10. <img loading="lazy" class="lazyload"
  11. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  12. data-src="/images/sample_04.jpg"
  13. width="960" height="593" alt="">
  14. <img loading="lazy" class="lazyload"
  15. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  16. data-src="/images/sample_05.jpg"
  17. width="960" height="593" alt="">
  18. <img loading="lazy" class="lazyload"
  19. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  20. data-src="/images/sample_06.jpg"
  21. width="960" height="593" alt="">
  22. <img loading="lazy" class="lazyload"
  23. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  24. data-src="/images/sample_07.jpg"
  25. width="960" height="593" alt="">
  26. <img loading="lazy" class="lazyload"
  27. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  28. data-src="/images/sample_08.jpg"
  29. width="960" height="593" alt="">
  30. <img loading="lazy" class="lazyload"
  31. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  32. data-src="/images/sample_09.jpg"
  33. width="960" height="593" alt="">
  34. <img loading="lazy" class="lazyload"
  35. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  36. data-src="/images/sample_10.jpg"
  37. width="960" height="593" alt="">
  38.  
  39. <img loading="lazy" class="lazyload"
  40. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  41. data-src="/images/large/sample_11.jpg"
  42. srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 640w"
  43. data-srcset="/images/small/sample_11.jpg 640w, /images/medium/sample_11.jpg 960w, /images/large/sample_11.jpg 1200w"
  44. sizes="100vw"
  45. alt="">
  46. <picture>
  47. <source
  48. media="(min-width: 1200px)"
  49. srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  50. data-srcset="/images/large/sample_12.jpg">
  51. <img loading="lazy"
  52. class="lazyload"
  53. src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  54. data-src="/images/sample_12.jpg"
  55. alt="">
  56. </picture>
  1. if ('loading' in HTMLImageElement.prototype) {
  2. //loading 属性がサポートされている場合
  3. //loading 属性に lazy が指定されている img 要素
  4. const images = document.querySelectorAll('img[loading="lazy"]');
  5. images.forEach(img => {
  6. //img 要素の src 属性の値に data-src 属性の値を設定
  7. img.src = img.dataset.src;
  8. });
  9. //img 要素で srcset 属性を使っている場合(data-srcset が指定されている img 要素)
  10. const img_srcset = document.querySelectorAll("img[data-srcset]");
  11. img_srcset.forEach(img_srcset => {
  12. //img 要素の srcset 属性の値に data-srcset 属性の値を設定
  13. img_srcset.srcset = img_srcset.dataset.srcset;
  14. });
  15. //picture 要素
  16. const sources = document.querySelectorAll("source[data-srcset]");
  17. sources.forEach(source => {
  18. //source 要素の srcset 属性の値に data-srcset 属性の値を設定
  19. source.srcset = source.dataset.srcset;
  20. });
  21. } else {
  22. //loading 属性がサポートされていない場合
  23. // 動的に lazysizes ライブラリーを読み込む
  24. const script = document.createElement('script');
  25. script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js';
  26. //script.src = 'path/to/lazysizes.min.js'; //ダウンロードしてある場合
  27. document.body.appendChild(script);
  28. }