Why images got 0 dimensions when masonry is applied?

[mstdmstd]

Hello,
I have pages with custom html/css design and haging grids with images I try apply masonry
when on page opned several rows are shown and any next click on “More photos” more rows are uploaded with ajax request.

container.blade.php :

<div class="main_gallery style-nominations">
    <div class="container main_gallery__container">
        <div class="main_gallery__wrap">

            <div class="main_gallery__head">
                <p class="main_gallery__title"> {{ $defaultCompilation->title ?? '' }}</p>
            </div>

            <div id="div_compilation_with_photos_container" class="compilations-grid-images-container">
            </div>

        </div>

        <div id="div_show_more_photos">
            <a onclick="javascript:loadPhotosOfCompilation(true)" class="nomination-new__btn-more"
               style="cursor: pointer">
                <svg class="nomination-new__arr-down">
                    <use xlink:href="/img/sprite.svg#arr-down"></use>
                </svg>
                Ещё фото
            </a>
        </div>
    </div>
</div>  <!-- main_gallery style-nominations-->

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<script>
    var current_page = 1
    jQuery(document).ready(function () {
        loadPhotosOfCompilation(false)

    });

    function loadPhotosOfCompilation(load_next_page) {
        if (load_next_page) {
            current_page++
        }

        var current_compilation_id = {{ $defaultCompilation->id ?? '' }}

        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/get_compilation_with_photos_rows/' + current_compilation_id + "/" + current_page,
            success: function (response) {

                if (current_page === 1) {
                    $("#div_compilation_with_photos_container").html(response.html);
                }
                if (current_page > 1) {
                    $(".main_gallery__block:last").after(response.html);
                }

                if (response.rows_uploaded_count >= response.compilation_with_photos_total_count) {
                    $("#div_show_more_photos").css('display', 'none');
                } else {

                    $("#div_show_more_photos").css('display', 'block');
                }

                var debug= {{ $debug ?? 0 }}

                if (debug) {
                    InitMasonry() // InitMasonry is ineted are new rows are appended in the end of the listing
                }
            },
            error: function (error) {
                console.error(error)
            }
        });

    } // function loadPhotosOfCompilation(load_next_page) {

    function InitMasonry() {
        console.log('resources/views/components/frontend/compilation/compilation-with-photos-container.blade.php InitMasonry::')
        var elem = document.querySelector('.compilations-grid-images-container');
        var msnry = new Masonry(elem, {
            itemSelector: '.grid-compilation-image',
            columnWidth: 200,
            gutter: 5,  // желоб
        });
    }

</script>

and file with rows added on any click “More photos” :

<div class="main_gallery__blocks">

    @foreach($photosOfCompilation as $nextPhotosOfCompilation)
        @if(!empty($nextPhotosOfCompilation->media_image_url) and !empty($nextPhotosOfCompilation->photo->name) )

            <div class="main_gallery__block grid-compilation-image">
                <div class="main_gallery__content">

                    <a href="{{ route('one_photo', [ $nextPhotosOfCompilation->photo->slug.'.'.$nextPhotosOfCompilation->photo_id, 'compilations.' . $nextPhotosOfCompilation->compilation_id ]) }}" class="main_gallery__link"></a>

                    <img src="{{ $nextPhotosOfCompilation->media_image_url }}" alt="">

                    @foreach($nextPhotosOfCompilation->photo->photoNominations as $nextPhotoNomination)
                        <div data-tooltip data-tooltip-theme="theme-dark"
                             title="{{$nextPhotoNomination->nomination->title}}"
                             class="sticker_mark main_gallery__sticker_mark color-1"
                             style="fill : {{ $nextPhotoNomination->nomination->color }} !important; color: white !important;"
                        >
                            <svg class="sticker_mark__bg">
                                <use xlink:href="/img/sprite.svg#sticker_mark"></use>
                            </svg>
                            <svg class="sticker_mark__lightning">
                                <use xlink:href="/img/sprite.svg#lightning"></use>
                            </svg>
                        </div>
                    @endforeach


                    <div class="main_gallery__info">
                        <div class="main_gallery__user">
                            <img src="{{ $nextPhotosOfCompilation->avatar_media_image_url }}" alt="">
                            <p class="main_gallery__user-name"><a
                                    href="photographer_page.html">{{  $nextPhotosOfCompilation->photo->id  }}->{{ $nextPhotosOfCompilation->photo->owner['name'] ?? '' }}</a>
                            </p>
                        </div>

                        @if($nextPhotosOfCompilation->photo_likes_count > 0)
                            <div class="main_gallery__likes">
                                <svg class="icon icon-like">
                                    <use xlink:href="/img/icons.svg#like"/>
                                </svg>
                                <span> {{ $nextPhotosOfCompilation->photo_likes_count }}</span>
                            </div>
                        @endif
                    </div>

                </div>
            </div>

        @endif
    @endforeach

</div>

and when I run page without masonry I have grid of images. Please look at page :

LV | Номинации

But if to add 1 more parameter for debug mode :
LINKABOVE/1

then Masonry is inited (is is reflected in browser’s console) but all images have 0 width/height
and are not visible : Screenshot by Lightshot

Why so and how that can be fixed ?

Thanks!