[Feature Request] Apply better before load size handling

[TomS-]

Using padding-bottom is good, but causes issues as a browser doesn't treat a div the same way it treats an image. Also the image has to be positioned absolute. The other option is to apply a placeholder based on width and height.

var lazyLoading = document.querySelectorAll('.lazyload');

for(var i = 0, length = lazyLoading.length; i < length; i++) {
    var el  = lazyLoading[i];
    var width = el.getAttribute('width');
    var height = el.getAttribute('height');

   el.setAttribute('src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '"></svg>');
}

This will create a transparent placeholder at the correct size until the image is loaded.

[TomS-]

Shame after all this time, this hasn't been implemented in anyway. For those who are looking to avoid reflow still, it's as easy as one line of code:

document.querySelectorAll('img.lazyload').forEach((el) => el.hasAttribute('src') || el.setAttribute('src', `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${el.getAttribute('width')} ${el.getAttribute('height')}"%3E%3C/svg%3E`));