search

RevillWeb / img-2

Replace <img /> elements with <img-2> to automatically pre-cache images and improve page performance.
MIT License
1.89k stars 63 forks source link

This + responsive images #1

Open Culpable opened 6 years ago

Culpable commented 6 years ago

Hiya,

Is there any way to get this to play nicely with responsive images?

Specifying my width and height in my HTML, I am unable to add: height: auto;

Without breaking the script.

(Note I'm having to specify !important to avoid it being overridden)

There might be a CSS solution to this, but I can't think of one.

Maybe once the script is loaded, it then adds a custom CSS class with height: auto !important; ?

Just split balling here. Not sure if that would work.

RevillWeb commented 6 years ago

Hey Culpable, thanks for taking the time to create an issue. Currently, a static width and height are required to calculate whether the images will be in the viewport or not. I don't currently know of a performant way to avoid this :(

AleksandarAleksandrov commented 6 years ago

Maybe display a 1px X 1px div, to detect if it is visible, so that way he can load height: auto images. Just a sugestion, react-loadable-visibility I think does it that way.

RevillWeb commented 6 years ago

I'll take a look at that library thank you.

I don't think this will work in at least a few cases though. Let's say you have quite a few images on the screen, like in the demo for this repo. Let's say that each image is actually 300px x 300px which meant that 5 images would initially be visible in the user's viewport. So we want to display these immediately and pre-cache/lazy-load any other images on the page. If the library didn't know that the images are actually 300px x 300px and thought they were 1px x 1px as suggested then it's probably just going to immediately download and render them all, instead of pre-caching and lazy-loading because it thinks they are all in the user's current viewport :(