legitcode / image Goto Github PK

Check if the image tag is close to the scroll height and only load it at that point. Make this an optional prop

This component needs more work to really be future-proof. Expect a pr from me soon.

When using the react-redux-universal-hot-example repo as a starting point (https://github.com/erikras/react-redux-universal-hot-example/tree/4705688b879f853ede08e3872bc083cc84227824)

My component:

<Image className="thumbnail" src="https://i.imgur.com/l50kGUz.png" />

The HTML that comes through in the view source:

<img class="thumbnail" src="https://images.unsplash.com/photo-1439003511744-2a0490ea0a88?q=80&amp;fm=jpg&amp;s=4dd5809698048edf8b82eedb82ca8cec" style="transition:opacity 1s;opacity:0;" data-reactid=".mzv5v08jcw.2.0.0.0">

Notice how the opacity is frozen at 0.

How to reproduce:

1. Clone that example repo down
2. npm i --save legit-image
3. Spam Image tags on the homepage or whatever page
4. npm start

Race condition with server-side rendering?

Hi :)

When I use your component, I get this error message:

Uncaught Error: A valid ReactComponent must be returned.

Figured, this happens because React is considering the component only valid if its enclosed in div tags. So when changing your code as below, things work properly well.

    return (
      <div>
        <img
          {...this.props}
          style={style}
          src={this.props.src}
          onLoad={this.fadeIn}
        />
      </div>
    )

@nmn

it makes sense to support those. you probably won't need any transitions in that case.

I'm not quite sure what the intention was with the first part of this line:

if(!src.match(/http/) || typeof window === 'undefined') opacity = 1

Basically that means you won't get fading images for:

• Relative URLs (<LegitImage src="foo.jpg" />)
• Protocol-less URLs (<LegitImage src="//domain.com/foo.jpg" />)

Using peer dependency causes it to break in react 0.14.8