search

plotly / dash

Data Apps & Dashboards for Python. No JavaScript Required.
https://plotly.com/dash
MIT License
21.19k stars 2.04k forks source link

Add loading attribute to html.Img component #2423

Open LiamLombard opened 1 year ago

LiamLombard commented 1 year ago

Is your feature request related to a problem? Please describe. I'm trying to lazy load images using the in built browser functionality, but I can't because that's not exposed in the html.Img component.

Describe the solution you'd like I'd like the loading attribute to be added to the html.Img built in component, so I can use

html.Img(src=..., loading="lazy")

Describe alternatives you've considered I tried using dangerously set html from the dcc markdown component and the dash-dangerously-set-html library. The former didn't work (I'm assuming something todo with the async nature of the markdown loading process). The later works, but this component doesn't support serialisation like other dash components and broke some caching (standard Flask-Caching stuff) required for my particular usecase.

Additional context Discussed briefly on the plotly forum https://community.plotly.com/t/html-img-browser-based-lazy-loading/72637/3

alexcjohnson commented 1 year ago

Thanks @LiamLombard - most likely we just need to add loading to this list:

https://github.com/plotly/dash/blob/ae093af869ad6a57292b35a065c8c953bbb90444/components/dash-html-components/scripts/extract-attributes.js#L15

Might be nice to also have that process track all the attributes we filter out and error if this changes, so that (a) we can see what others we're missing, and (b) when new attributes are added in the future we'll be alerted to this.