非同期で画像を読み込みたい
という方向けの記事です。
こんにちは、ティロといいます
プログラミング好きな理系大学生です
javascriptのコードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const srcMap = new Map(); window.addEventListener('DOMContentLoaded', () => { const imgs = document.querySelectorAll('img'); imgs.forEach((img) => { srcMap.set(img, img.dataset.src); img.removeAttribute('src'); }); }); window.addEventListener('load', () => { const imgs = document.querySelectorAll('img'); imgs.forEach((img) => { const source = srcMap.get(img); img.src = source; }); }); |
htmlではimg要素にはdata-src属性を指定しています。これでロードの際に画像が表示されなくなります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"s> <script src="imgload.js"></script> </head> <style> img { height: 200px; width: auto; } </style> <body> <img data-src="img/1.png"> <img data-src="img/6.png"> <button class="btn">読み込む</button> </body> |
処理の流れはまず新しく作ったMap(キーと値がセットになったもの)に取得したimg要素とdata-src属性を入れます。DOMContentLoadedは以下の通りです。
DOMContentLoadedイベントとは？
最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。
srcがあると通信されるため、removeAttributeでsrc属性を除去します。
loadイベントで読み込みが完了したときにforEach文で各imgを取り出し、Mapに保存した属性値をsrc属性に代入しています。これで画像が表示されます。
DOMContentLoadedイベントとloadイベントの違いはDOMContentLoadedはhtmlの文書や解析が終わったあと発火します。その時点では画像は読み込まれていません。一方loadイベントではページ内のリソース（画像等）の読み込み完了時に発火します。
Map.set(img, img.dataset.src)はmap.set(key, value)でキーで値を保存します。
参考書籍
javascriptのあらゆる技法が書かれています。
パラパラ見ているだけで「javascriptってこんなこともできるの⁉」と楽しくなります