JSFiddle - React, Tailwind, and code Playground

Measuring lazyloaded image dimensions

by tonytlwu

HTML

<p><img src="https://images.unsplash.com/photo-1611095971113-9f7542655338?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2251&q=80" loading="lazy" /></p>

<p><img src="https://images.unsplash.com/photo-1613310025468-336db5e0a7a0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" loading="lazy" /></p>

<p><img src="https://images.unsplash.com/photo-1613351432233-26b513106fb5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2251&q=80" loading="lazy" /></p>

<p><img src="https://images.unsplash.com/photo-1593642634402-b0eb5e2eebc9?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" loading="lazy" /></p>

<p><img src="https://images.unsplash.com/photo-1613325436307-5489b00ba07a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" loading="lazy" /></p>

<p><img src="https://images.unsplash.com/photo-1612831454918-f65c3ecfc34d?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1300&q=80" loading="lazy" /></p>

CSS

img {
  max-width: 100%;
}

JavaScript

setTimeout(function() {

  var sizes = $('img').map(function () {
    var $img = $(this);
    var width = $img.width();
    var height = $img.height();
    
    return [width, height].join(',');
  }).get();
  
  alert(sizes.join('\n'));

}, 2000);