search

scaleflex / react-cloudimage-responsive

Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load. Any questions or issues, please report to https://github.com/scaleflex/react-cloudimage-responsive/issues
MIT License
45 stars 16 forks source link

Custom image loading placeholder #2

Closed dgorczyca closed 5 years ago

dgorczyca commented 5 years ago

Hi team,

Is it possible to tell the library to use a particular image / gif while the image is loading? What would you recommend me to do in order to achieve that? Currently I can see in your code cloudimageUrl and previewCloudimageUrl seem to use the same imgSrc.

dzmitry-stramavus commented 5 years ago

Hey @dgorczyca,

This feature is in todo list. It'll be implemented in a few days. Stay tuned)

dzmitry-stramavus commented 5 years ago

@dgorczyca,

you can use placeholderBackground

for example (link to edit on CodeSandbox)

placeholderBackground: `url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/red-loader.gif') 50% 50% no-repeat`

you will see the following effect

demo with custom spinner

however, I used to slow my internet connection in order to see the spinner. The plugin uses LQIP (Low Quality Image Placeholders) and uses smart cache. I think the best user experience will be to set just placeholder background color. By default it's set to #f4f4f4

placeholderBackground: '#f4f4f4'