Giters

hzdg / react-imageloader

A React component for wrangling image loading

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Image onLoad callbacks never fire

cadecairos opened this issue · comments

commented

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.

commented

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?

commented

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

commented

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

commented

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

commented

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

commented

Nope, we're rendering the component client-side

commented

@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?
commented

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?

commented

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

commented

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

commented

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

commented

wonderful! I'll try it out tomorrow

commented

Darn, still seeing the problem when using v2.0.0

commented

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

commented

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

commented

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');
    }
}