<div class="container">
    <div class="row">
        <div class="item">
            <div data-background-src="https://www.desktopbackground.org/download/o/2013/05/17/577353_most-beautiful-pictures-of-nature-in-the-world-wallpapers-high_2560x1440_h.jpg" data-background-async>
                Lorem ipsum dolor sit amet.
                <div class="loaded">Загружаю ...</div>
            </div>
        </div>
        <div class="item">
            <div data-background-src="https://upload.wikimedia.org/wikipedia/commons/c/c5/Polarlicht_2_kmeans_16_large.png" data-background-async>
                Lorem ipsum dolor sit amet.
                <div class="loaded">Загружаю ...</div>
            </div>
        </div>
        <div class="item">
            <div data-background-src="https://www.fujifilm.ca/products/digital_cameras/x/fujifilm_x_m1/sample_images/img/index/ff_x_m1_018.JPG" data-background-async>
                Lorem ipsum dolor sit amet.
                <div class="loaded">Загружаю ...</div>
            </div>
        </div>
        <div class="item">
            <div data-background-src="https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg" data-background-async>
                Lorem ipsum dolor sit amet.
                <div class="loaded">Загружаю ...</div>
            </div>
        </div>
    </div>
</div>
.container {
  width: 100%;
  margin: 0 auto;
}

.row {
  display: flex;
  justify-content: space-around;
}

.item {
  width: 20%;
  height: 200px;
}

[data-background-async] {
  display: block;
  height: 100%;
  width: 100%;
  border: 4px solid red;
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
    (function ($) {
        'use strict';

        $.fn.backgroundAsync = function (options) {
            var setting = $.extend({}, {
                src: 'data-background-src',
                loaded: function () {}
            }, options || {});
            return $.each(this, function () {
                var src = $(this).attr(setting.src);
                $('<img/>').attr('src', src).on('load', function () {
                    $(this).removeAttr(setting.src).css('background-image', 'url("' + src + '")');
                    setting.loaded && setting.loaded.call(this);
                }.bind(this));
            });
        };

        $('[data-background-async]').backgroundAsync({
            loaded: function () {
                console.log(this);
                $(this).css('border', '4px solid green').find('.loaded').text('ЗАГРУЖЕНО!');
            }
        });

    }(jQuery));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js