search

beekai-oss / react-simple-img

🌅 React lazy load images with IntersectionObserver API and Priority Hints
MIT License
989 stars 41 forks source link

Wanting to turn off all class insertions #70

Closed pkellner closed 5 years ago

pkellner commented 5 years ago

I would like to be able to turn off any styling that is added by react-simple-img. That is, I just want lazy loading, no animations, no class insertions. Maybe just visible on and off, but I'd prefer to even have that as an option.

bluebill1049 commented 5 years ago

can you add imgStyle: { transition: '0s' }? if you don't want animation, curious to know the reason too.

pkellner commented 5 years ago

First, my appologies for not submitting a nice bug report. I'm bad at CSS and the complex CSS I have is no longer supported so my changes are painful. My hope was to just replace my img tags with your SimpleImg tag. It did work well on my speakers and sessions but not so much on sponsors. When I inspect the html and compare it pre and post SimpleImg, there is a div added that I think is hurting my formatting.

If you look at this page near the bottom https://svcc.mobi/, you'll see a tab dialog that shows "Gold & Platinum" and "All The Sponsors". They basically show the same formatting. "Gold & Platinum" format as I would expect (flowing across the screen), and "All the sponsors" has the imaged forced to one image per row. The only difference is "All the sponsors" uses the SimpleImg tag (and I had to add width and height of 200 but now sure why).

Again, my hope was I could just drop in the SimpleImg tag and the formatting would not change.

Make sense? I can explain further if this is not clear.

BTW, thanks for putting this together. Very nice !

bluebill1049 commented 5 years ago

i see @pkellner can you try to use placeholder={false} in SimpleImfg, see if that solve your layout issue.

pkellner commented 5 years ago

That worked! Thanks. I had tried it before, but I read that placeholder is a string so I passed it as placeholder={"false"} and I'm pretty sure that did not help me. I use TypeScript and I don't there there is a type file that would have helped me. Again, something I wish I knew more about.

Thanks again for the help, your contributions, and this awesome project.

bluebill1049 commented 5 years ago

that's great to hear! thank you :) close the issue when you ready 👍