JSFiddle - React, Tailwind, and code Playground

by kspr

HTML

<div id="grid">
    <!-- aca pondremos 400 imagenes -->
</div>

CSS

#grid {
    width: 800px;
    height: 800px;
}

#grid > .item {
    background: lightgray;
    display: inline-block;
    width: 40px;
    height: 40px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
	const grid = document.querySelector('#grid');
	const totalItems = 800 / 40;
    
	Array.apply(null, Array(totalItems * totalItems)).forEach(_ => {
        	const img = randomImage();
            const src = img.src;
            
            img.classList.add('item');
            lazyLoadImage(img);            
            grid.appendChild(img);
        });
});

function lazyLoadImage(img) {
    const transparentSrc = 'data:image/gif;base64,R0lGODlhAQABA'
    	+ 'IAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
	const src = img.src;
    const tempImage = new Image();
    
    img.src = transparentSrc;
    tempImage.src = src;
    
    tempImage.onload = () => {
    	img.src = src;
    };
}

function randomImage() {
	const img = document.createElement('img');
	const uid = window.crypto.getRandomValues(new Uint32Array(10))[0];
    
	img.src = `https://placeimg.com/40/40/any?upd=${uid}`;
    
    return img;
}