japboy · February 19, 2019 14:25
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <style>
            p {
                text-align: center;
            }
            #pics {
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
            }
            img {
                background-color: hsl(0, 0%, 80%);
                display: inline-block;
                width: 100px;
                height: 100px;
                margin: 0 0 3px 3px;
            }
        </style>
        <script defer>
            document.addEventListener('DOMContentLoaded', () => {
                function load(el, src) {
                    return new Promise((resolve, reject) => {
                        el.addEventListener('error', reject, { once: true });
                        el.addEventListener('load', resolve, { once: true });
                        el.src = src;
                    });
                }
                async function init() {
                    let i = 0;
                    while (i < 100) {
                        const el = document.createElement('img');
                        document.querySelector('#pics').appendChild(el);
                        try {
                            await load(el, 'https://thispersondoesnotexist.com/?_=' + i);
                        } catch (error) {
                            console.warn(error.message);
                            break;
                        }
                        i += 1;
                    }
                }
                init();
            }, false);
        </script>
    </head>
    <body>
        <p><a href="https://thispersondoesnotexist.com">https://thispersondoesnotexist.com</a></p>
        <div id="pics"></div>
    </body>
 </html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>test</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<style>
	p {
	text-align: center;
	}
	#pics {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	}
	img {
	background-color: hsl(0, 0%, 80%);
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 0 0 3px 3px;
	}
	</style>
	<script defer>
	document.addEventListener('DOMContentLoaded', () => {
	function load(el, src) {
	return new Promise((resolve, reject) => {
	el.addEventListener('error', reject, { once: true });
	el.addEventListener('load', resolve, { once: true });
	el.src = src;
	});
	}
	async function init() {
	let i = 0;
	while (i < 100) {
	const el = document.createElement('img');
	document.querySelector('#pics').appendChild(el);
	try {
	await load(el, 'https://thispersondoesnotexist.com/?_=' + i);
	} catch (error) {
	console.warn(error.message);
	break;
	}
	i += 1;
	}
	}
	init();
	}, false);
	</script>
	</head>
	<body>
	<p><a href="https://thispersondoesnotexist.com">https://thispersondoesnotexist.com</a></p>
	<div id="pics"></div>
	</body>
	</html>