onImageLoad is not a function

[grund3g]

Hi, like mentioned here https://github.com/bigbitecreative/macy.js/issues/21 I also have a problem with the 2.0.0 version. When I setup a Macy instance:

let macy_instance = Macy({
    // options
})

macy_instance.onImageLoad(null, () => {
    macy_instance.recalculate();
});

I got "TypeError: macy_instance.onImageLoad is not a function".

Anything wrong with my code?

[jrmd]

Hi,

Whilst rewriting this, I didn't put this back in; but there is a similar function you can use.

macy_instance.runOnImageLoad(() => {}, false)

If you would prefer to me to add this back in I can look in to in the next release

I feel like this method is more useful though. Simply calls that with a function as the first parameter, then pass true/false as the second; if true then the function will run on every load, if false, it will only run at the end.

I will update the docs accordingly.

Sorry for any confusion

[grund3g]

Thanks! Works like a charm.

[jcklpe]

@jrmd

I imagine this is the same answer to the problem I'm having with lazy load.

I'm new to code though and I'm not quite sure where to put macy_instance.runOnImageLoad(() => {}, false)

First, the documentation says you can set waitForImages to false, and that sounds like it should do something similar to runonImageLoad when set to true. Am I misunderstanding something?

Secondly you say that you call a function as the first parameter when running runonImageLoad. When I try just copying and pasting macy_instance.runOnImageLoad(() => {}, false) at the end of my html document inside a script tag, I get a message from my IDE that I need to put a value in the (). I assume that's what you mean. I need to out a function to run inside the () that will run whenever runOnImageLoad detects an image being loaded, correct? In this case would that function be something like macy_instance.recalculate(); ? or maybe macy_reInit? That goes in the () not the {} right?

Sorry if these are some very basic questions. I'm a designer learning code, and some of my fundamentals are still not up to snuff.

[jcklpe]

When I do try running either macy_recalculate or macy_reinit I get a Reference error that looks like this:

Uncaught ReferenceError: macy_instance is not defined at <anonymous>:1:1

I also checked and it looks like `macy_instance.runOnImageLoad((macy_instance.recalculate();) => {}, false); is also producing a token error. Not sure what a token error is, I'll go look it up, but maybe I'm passing it the recalculate function incorrectly?

[jcklpe]

Okay I see. macy_instance is a reference to the var that is set for the originaly Macy.init. So I've changed my original Macy.init to this:

 var macy_instance = Macy.init({
            container: '#gallery-wrapper',
            trueOrder: true,
            waitForImages: false,
            margin: 0,
            columns: 3,
            breakAt: {
                1200: 3,
                940: 2,
                520: 1

            }
        });

        macy_instance.runOnImageLoad((macy_instance.recalculate();) => {}, true);

Still running into some issues though. Still getting that token error, and not sure why.

Looking at the #21 thread, I think there might be something else I'm doing wrong?

[jrmd]

Hi @thedonquixotic you have a syntax error here

the runOnImageLoad function should look like this

macy_instance.runOnImageLoad(() => { macy_instance.recalculate(); }, true);

[jcklpe]

Excellent, thank you so much @jrmd I don't yet know ECMA 6 so I will admit that my attempts were pretty malformed. Thank you so much for the help though! This has inspired me to create a attributions page to link to all the frameworks and stuff I've used, and I'll be sure to link you guys :)

[jrmd]

@thedonquixotic thats great news :) ECMA 6 can be confusing but you dont have to use it if you;re not comfortable with it yet. could can replace the line i sent with

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