Why images got 0 dimensions when masonry is applied?

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 id="div_compilation_with_photos_container" class="compilations-grid-images-container">


        <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>
                Ещё фото
</div>  <!-- main_gallery style-nominations-->

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

    var current_page = 1
    jQuery(document).ready(function () {


    function loadPhotosOfCompilation(load_next_page) {
        if (load_next_page) {

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

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

                if (current_page === 1) {
                if (current_page > 1) {

                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) {

    } // 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,  // желоб


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"
                             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 class="sticker_mark__lightning">
                                <use xlink:href="/img/sprite.svg#lightning"></use>

                    <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>

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




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

But if to add 1 more parameter for debug mode :

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 ?


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.