Исправить размер обтекания изображения с тем же размером Lazy Загрузить изображение

Question

Я ищу, чтобы показать фоновое изображение перед ленивой загрузкой, с точно таким же размером изображения. Мой скрипт получает ширину и высоту каждого изображения и накладывает их на обертку.

мой сценарий:

$(document).ready( function(){
    $('section .lazywrap').each(function(){ 

        var lazyWrap = $(this);
        var img = $(lazyWrap, this);

        lazyWrap.width(img.width());
        lazyWrap.height(img.height());

        console.log(lazyWrap.height());
    });
});

мой HTML:

<a href="/" class="lazy-wrap">
  <img class="lazy" width="472" src="img.jpg" data-original="img.jpg" >
</a>

Проблема в:

Веб-браузер может получить значение высоты, даже если он не реализован в <img>, НО только для изображений, которые видны в окне просмотра при загрузке страницы из-за отложенной загрузки.

Я прочитал много вещей об адаптивном фоновом изображении с помощью трюка с отступом внизу, но в моем случае мне действительно нужны реальные значения ширины и высоты в этом "предварительном просмотре фона", а не соотношение. Все мои изображения имеют разное значение высоты.

Спасибо за вашу помощь.

Answer 1

Наконец, я нашел альтернативное решение с помощью ленивых вызовов плагинов загрузки. Это позволяет использовать фоновый цвет с точным размером вместо загружаемого изображения.