JSFiddle - React, Tailwind, and code Playground

by kspr

HTML

<div id="performance">
  <h3>Imagenes cargadas:</h3>
  <ul></ul>
</div>
<div id="images"></div>
<script src="main.js"></script>

CSS

ul, li {
  list-style-type: none;
}

#performance {
  background: #f0f0f0;
  border-radius: 4px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

#images {
  max-height: 400px;
  overflow-y: scroll;
}

JavaScript

document.onreadystatechange = () => {
    if (document.readyState !== 'complete') return;

    const performanceEntries = window.performance.getEntries();
    const images = performanceEntries.filter((resource) => {
        return resource.initiatorType === 'img';
    }).map(resource => resource.name);

    const performanceUL = document.querySelector('#performance > ul');

    images.forEach(img => {
        const li = document.createElement('li');
        li.innerText = img;

        performanceUL.appendChild(li);
    });
};

// add some random images
(() => {
    const imagesContainer = document.querySelector('#images');

    Array.apply(null, Array(5)).forEach(() => {
        const img = document.createElement('img');
        img.src = `https://placeimg.com/640/480/any?dummy=${Math.random()}`
        imagesContainer.appendChild(img);
    });
})();