react-imageloader: Image onLoad callbacks never fire

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.

About this issue

Original URL
State: open
Created 9 years ago
Comments: 16 (7 by maintainers)

Most upvoted comments

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

xinghul on Jul 6, 2018