JQuery on load function changes CSS property of image loaded

Question

Following implementation of loading all the background images works fine but it does not have lazy loading. (code belongs to template provided by: https://html5up.net/multiverse

// Main.
    var $main = $('#main');

    // Thumbs.
        $main.children('.thumb').each(function() {

            var $this = $(this),
                $image = $this.find('.image'), $image_img = $image.children('img'),
                x;

            // No image? Bail.
                if ($image.length == 0)
                    return;

            // Image.
            // This sets the background of the "image" <span> to the image pointed to by its child
            // <img> (which is then hidden). Gives us way more flexibility.

                // Set background.
                    $image.css('background-image', 'url(' + $image_img.attr('src') + ')');

                // Set background position.
                    if (x = $image_img.data('position'))
                        $image.css('background-position', x);

                // Hide original img.
                    $image_img.hide();

        });

this is what I want after lazy loading and it is the result of above code

but using lazy loading (https://github.com/verlok/lazyload) and changing to following code messes up with the CSS property of images like background-size:cover fails to work but lazy loading works fine.

// Main.
    var $main = $('#main');

    // // Thumbs.
        $main.children('.thumb').each(function() {


            var $this = $(this),
                $image = $this.find('.image'), $image_img = $image.children('img'),$thumb_img = $image.children('img'),
                x;

            $('<img>').attr('data-src',$image_img.attr('data-src')).on('load', function(){
                if($(this).attr('src') == $(this).attr('data-src')) {
                    $(this).css({'height': 'auto', 'width': '100%'});
                }
                $image.css('background-image', 'url(' + $image_img.attr('data-src') + ')');
                $image.css('background-size', 'cover');
                $image.css('background-position', 'center');
                    if (x = $image_img.data('position'))
                        $image.css('background-position', x);
                $image_img.hide();

            });




        }); 

here it fails to preserve css property as shown in first image, this is result of above code

It would be a great help if anyone can help me with this.