#モック作成などで使えるダミー画像を一気に取得したい
と思ったのでjsでやって見た。
##ダミー画像提供サービス
いくつかありますが、よく使うのがこちらのサイト。
Lorem Ipsum... but for photos
https://picsum.photos
こちらのサイト、フリーで使用可能な画像を、いろいろなサイズや、エフェクトなどをかけて取得できるウェブサービスです。
例えば、imgタグのsrc属性に
https://picsum.photos/200/300/?random
とすると、200x300の画像をランダムで取得し、表示してくれます。
##これ一気に取得してぇなぁと思った
こちらのウェブサービス、扱っている画像リストをhttps://picsum.photos/listというエンドポイントで使えるようにしてくれてるらしい。
ということで、JavaScript書いて見ました。
##ダミー画像リストを取得するコード
id="target"の中にimgをどんどん並べていくことにします。
index.html
<body>
<div id="target"></div>
</body>
そしてjavascriptコード
window.onload = () => {
let width_16 = Math.floor(window.innerWidth / 4);//画像を画面に4列並べるために、画面幅取得後4で割る。小数点以下は切り捨て
let height_9 = Math.floor(width_16 * 0.5625);//16：9サイズになるように、上記の幅から高さを計算
// https://picsum.photos/list から、jsonファイルを扱う
let xhr;
xhr = new XMLHttpRequest();
xhr.open("GET", "https://picsum.photos/list", false);
xhr.send(null);
let targetElm = document.getElementById('target');//画像を出力する領域
let data = xhr.responseText;
let jsondata = JSON.parse(data);//オブジェクトとして扱う
// ダミー画像を表示させるfunction
function getDummyImg(data) {
//imgタグを作成
let imgtag = document.createElement('img');
//jsondataからidを取得。src属性にセット。
imgtag.setAttribute('src','https://picsum.photos/' + width_16 + '/' + height_9 + '?image=' + data.id);
//img要素を追加していく
targetElm.appendChild(imgtag);
}
// jsondataオブジェクトから一個ずつ取り出し、関数を繰り返し実行する
for (let value of jsondata) {
getDummyImg(value);
}
}
ただこれだと、2000枚近くのimg画像を一気に取得しようとしてしまって、img読み込み時にエラーが出まくって、画像がちゃんと表示されませんでした。
##画像遅延読み込みと合わせる
tada.jsというjqueryに依存しないライブラリがあったので使って見たらなんとかなりました。
githubからクローンかDLするしかないっぽいです。
tada.js
https://github.com/fallroot/tada
ファイルを用意したら、htmlに読み込みます。
index.html
<script src="tada.js"></script><!-- 画像遅延読み込みさせるライブラリ -->
先ほどのjsを書き換えます
window.onload = () => {
let width_16 = Math.floor(window.innerWidth / 4);//画像を画面に4列並べるために、画面幅取得後4で割る。小数点以下は切り捨て
let height_9 = Math.floor(width_16 * 0.5625);//16：9サイズになるように、上記の幅から高さを計算
// https://picsum.photos/list から、jsonファイルを扱う
let xhr;
xhr = new XMLHttpRequest();
xhr.open("GET", "https://picsum.photos/list", false);
xhr.send(null);
let targetElm = document.getElementById('target');//画像を出力する領域
let data = xhr.responseText;
let jsondata = JSON.parse(data);//オブジェクトとして扱う
// ダミー画像を表示させるfunction
function getDummyImg(data) {
//imgタグを作成
let imgtag = document.createElement('img');
//jsondataからidを取得。tada.jsで使用する為、"data-src"属性に画像urlをセットする
imgtag.setAttribute('data-src','https://picsum.photos/' + width_16 + '/' + height_9 + '?image=' + data.id);
//img要素を追加していく
targetElm.appendChild(imgtag);
}
// jsondataオブジェクトから一個ずつ取り出し、関数を繰り返し実行する
for (let value of jsondata) {
getDummyImg(value);
}
//img遅延読み込みtada.jsを実行する
Tada.add('img');
}
適当にマージンとかとっておくと綺麗に並びます。
<style type="text/css">
body,img{
margin: 0;
padding: 0;
}
</style>
##まとめ
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<title>get dummy image list -- javascript</title>
<style type="text/css">
body,img{
margin: 0;
padding: 0;
}
</style>
<script src="tada.js"></script><!-- 画像遅延読み込みさせるライブラリ -->
<script type="text/javascript">
window.onload = () => {
let width_16 = Math.floor(window.innerWidth / 4);//画像を画面に4列並べるために、画面幅取得後4で割る。小数点以下は切り捨て
let height_9 = Math.floor(width_16 * 0.5625);//16：9サイズになるように、上記の幅から高さを計算
// https://picsum.photos/list から、jsonファイルを扱う
let xhr;
xhr = new XMLHttpRequest();
xhr.open("GET", "https://picsum.photos/list", false);
xhr.send(null);
let targetElm = document.getElementById('target');//画像を出力する領域
let data = xhr.responseText;
let jsondata = JSON.parse(data);//オブジェクトとして扱う
// ダミー画像を表示させるfunction
function getDummyImg(data) {
//imgタグを作成
let imgtag = document.createElement('img');
//jsondataからidを取得。tada.jsで使用する為、"data-src"属性に画像urlをセットする
imgtag.setAttribute('data-src','https://picsum.photos/' + width_16 + '/' + height_9 + '?image=' + data.id);
//img要素を追加していく
targetElm.appendChild(imgtag);
}
// jsondataオブジェクトから一個ずつ取り出し、関数を繰り返し実行する
for (let value of jsondata) {
getDummyImg(value);
}
//img遅延読み込みtada.jsを実行する
Tada.add('img');
}
</script>
</head>
<body>
<div id="target"></div>
</body>
</html>
以上です。