Skip to content

Instantly share code, notes, and snippets.

@japboy
Last active February 19, 2019 14:25
Show Gist options
  • Save japboy/7232c70ab20956a5b99c19e219d17dd7 to your computer and use it in GitHub Desktop.
Save japboy/7232c70ab20956a5b99c19e219d17dd7 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment