Image onLoad callbacks never fire

[cadecairos]

We're hitting a very strange bug where the first time a page loads in our app (i.e. after an install) the images we try to load with react-imageloader fail to fire the onLoad callback.

Here's a perma-link to the way we're using the component right now: https://github.com/mozilla/webmaker-android/blob/ef9a69050406c823c238ffbf7590705d717f00a0/www_src/components/card/card.jsx

I haven't been able to figure out exactly why the image (apparently created using React.DOM.img) never fires its' onLoad event.

[lettertwo]

Hmm, very strange indeed! I've read through mozilla/webmaker-android#2207 and taken a cursory look at the project (very cool!), but I don't see anything obvious. Is the image local to the app?

[cadecairos]

The images failing to load are in an S3 bucket, and sitting behind a Cloudfront distribution.

[lettertwo]

Thanks. Do you know of any other cases where it is also not working, i.e. from the S3 bucket directly?

[cadecairos]

Not currently. I can try loading images right off of S3, and elsewhere too.

[lettertwo]

@cadecairos Another question: are you pre-rendering your component server side? I think there might be a case where the img is getting to the DOM before mount in that scenario...

[cadecairos]

Nope, we're rendering the component client-side

[lettertwo]

@cadecairos Apologies for the continual bombardment, and thanks for bearing with me. I'm trying to get a reproducible case together using the web instance of webmaker, but no luck so far. So, if you don't mind, i have two questions:

1. is it reproducible, to your knowledge, directly in the browser (i'm looking in FF dev edition and chrome)?
2. if so, do you have a method I could use to reliably reproduce it?

[cadecairos]

I've never been able to produce it in a browser, only in the crosswalk webview inside of android.

I wonder if there's a way to get crosswalk running outside of android?

[cadecairos]

Thank you for looking into this! Ask any and all questions that might help us find out what's going on

[lettertwo]

No problem! We've been planning a bit of a rewrite for the component for a while now, and this seems like as good a reason as any to bite that bullet, so if you're willing to allow a few more days of bad behavior, i'll have some answer for you (or at least a new version for you to try).

[lettertwo]

@cadecairos I just pushed a 2.0.0 version to NPM–no significant API changes, but lots of internal changes. Would you mind giving it a spin and see if it solves this problem for you?

[cadecairos]

wonderful! I'll try it out tomorrow

[cadecairos]

Darn, still seeing the problem when using v2.0.0

[lettertwo]

ah crap 😞

What do you think is the likelihood that the problem is being caused by this (apparently very recently fixed) chromium/blink bug? https://code.google.com/p/chromium/issues/detail?id=7731

[cadecairos]

That does look suspect. I'll try running our app using Crosswalk canary

[xinghul]

Are you using server-side rendering? If so, this could be that the image is loaded during server-side rendering, before js is downloaded(react attach onLoad handler after js is loaded).

Basically, onLoad is attached after the image is loaded, that's why it's never fired.

You can check if image is already loaded in componentDidMount:

componentDidMount() {
    // get image ref
    const image = this.imageRef.current;

    if (image && image.complete) {
      console.log('image already loaded');
    }
}