Macy ReInit for lazy load images?

[jcklpe]

Hey, I love the simplicity of Macy! I'm having a little trouble though getting it to work with lazy loading.

I'm using jQuery.lazy in a wordpress based gallery plugin that I'm building.

All my images end up overlapping, because it can't get the height for Macy.

Reading a bunch of threads on similar problems it seems I need to reinit Macy. The documentation says that if waitForImages is set to false then it will run Macy every time images are added to the page. So it seems that as I have Macy on all default settings, then every time a new image loads through jQuery.lazyload, except it doesn't seem to be recalculating each time a new image loads. :/

Am I missing something? Do I need to have macy_instance.reInit(); everytime jQuery.lazy adds an image?

[jcklpe]

Okay I've delved into this some more and I think part of the problem might be that the dist folder is out of date. I'm still new to JS and I haven't yet started building out my projects etc, so I just took the code from macy.js in dist and used that. recalculate and other things mentioned in other threads don't seem to be working, but macy_instance.reInit is working when I type it into the console. I'm having trouble getting it to trigger on new images being loaded though. Any help here would be much appreciated.

[jrmd]

Hi @thedonquixotic

Rather than call reInit I would recommend using macy_instance.recalculate() this would recalculate the images.

Hope this helps

[jcklpe]

@jrmd I tried running recalculate as per your suggesetion in the other thread but it doesn't seem to do anything. reInit is working with the onImageLoad though, so that's good! I'm guessing it's not super performative though? I'm not having problems yet at least.

[jrmd]

@thedonquixotic Could you show me an example so i can see how this is working but I have a feeling it will require true being passed as the first variable.

Like so, macy_instance.recalculate(true) this will force recalculate to reposition every element inside the container.

[jcklpe]

I'm using macy_instance.runOnImageLoad(function () { macy_instance.recalculate(); }, true); as per your suggestion in the other thread, but doesn't seem to work. I'm thinking this might just be because I have an old version of the dist file.

[jrmd]

Have you tried passing true as a parameter to the recalculate

Like so macy_instance.runOnImageLoad(function () { macy_instance.recalculate(true); }, true);

[jcklpe]

Ay, there we go, yes that works. Thank you!

[jrmd]

Awesome that's great news

If you are wondering how the issue is caused, it was caused due to many caching the elements as loaded from the first recalculate, this is obviously helps improved performance but sometimes we need to force update them all for instance when you lazy load the images or when you resize so you pass true as the first parameter to force Macy to ignore this cache and recalculate all elements :)

I will close this issue as I believe to have resolved the problem.

Let me know if you have any more problems

[jcklpe]

Excellent, thank you a bunch!

On Mon, Jun 19, 2017 at 6:26 PM Jerome Duncan notifications@github.com wrote:

Awesome that's great news

If you are wondering how the issue is caused, it was caused due to many caching the elements as loaded from the first recalculate, this is obviously helps improved performance but sometimes we need to force update them all for instance when you lazy load the images or when you resize so you pass true as the first parameter to force Macy to ignore this cache and recalculate all elements :)

I will close this issue as I believe to have resolved the problem.

Let me know if you have any more problems

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bigbitecreative/macy.js/issues/27#issuecomment-309601041, or mute the thread https://github.com/notifications/unsubscribe-auth/AJA4zqBnvBLSPJiuwvxRxmmU1BoTJ2Dyks5sFwONgaJpZM4N9E7M .