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

@import url('https://fonts.googleapis.com/css?family=Inconsolata');

body {
  font-family: 'Inconsolata';
}

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

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

#performance > h3 {
  margin: 0 0 10px 0;
}

#performance > ul {}

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

#images > img {
  max-width: 200px;
  margin: 5px;
}

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);
    });
})();