このブラウザでは loading 属性が使えます。
- <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="">
- <img loading="lazy" class="lazyload"
- src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
- data-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="">
- <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>
- 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);
- }