Grid dimensions only calculated on window resize

[richardpbull]

Hello, I must be doing something wrong as everywhere else I read about this it is working perfectly. I can't get the instance to resize on all images loading. The images remain overlapped until I resize the browser. Video below:

https://user-images.githubusercontent.com/5243046/103400813-9787e380-4aea-11eb-909d-b275469de034.mov

Here's the code being used on this example: https://www.ultratourmonterosa.com/gallery/

Help appreciated! Thank you.

var macy_instance = Macy({
    container: '#photos',
    trueOrder: false,
    waitForImages: true,
    margin: 6,
    columns: 3,
    breakAt: {
            1200: 3,
            940: 3,
            520: 2,
            400: 1
        }
    });

    macy_instance.runOnImageLoad(function () {
        console.log('I only get called when all images are loaded');
        macy_instance.recalculate(true, true);
    });

[ve3]

Confirm the same problem.

let macyInstance = new Macy({
    'columns': 3,
    'container': '#rdba-dashboard-row-normal'
});

[kuipumu]

I'm having the same issue, any fix?.

[jrmd]

hey @richardpbull @kuipumu

You could try running the recalculate event on each image load; the issue seems to be if an image has failed to load (or if it does it too quick) then it can cause issues with the event finishing you can try doing it like so here:

macy_instance.runOnImageLoad(function () {
  console.log('Every time an image loads I get fired');
  macy_instance.recalculate(true, true);
}, true);

[kuipumu]

Hi @richardpbull adding the recalculate event didn't fixed the issue, the problem was that if no src is present on each image macy.js fails to give a correct height, and unless you resize the windows the grid will be shown has previously captured.

[c8e4d2a]

same issue, src is present in all images

[c8e4d2a]

Dirty Fix:

macyInstance.runOnImageLoad(function () {
            macyInstance.recalculate(true, true);
            var evt = document.createEvent('UIEvents'); 
            evt.initUIEvent('resize', true, false, window, 0); 
            window.dispatchEvent(evt);
    }, true);

[Syed25794]

This dirty code didn't work for me. I fixed it by setTimeout function. Whenever I'm fetching the images and got the response after I setTimeout with 1 sec and define macy instance in setTimeout function. You can try also.

[joworeiter]

Setting waitForImages: false seems to solve the issue for me.

[talissonf]

I had this issue as well, and in my case, it happened because I was using VUE. Whenever I added new elements to the grid or tried to use the recalculate() or reInit() functions, the changes weren't being reflected in the application due to Vue's reactivity system.

The only solution that worked for me was to create a reference (ref) for the grid element I was using and then use this ref as the key for the grid. Every time I called the recalculate() function, I updated the value of my ref.

I believe if you're using this library with a framework like Vue or React, the same thing might be happening. With React, I think the solution to the problem would be the same.