0

I have a site where the user can upload an image. The image is uploaded to an S3 bucket, then processed with a Lambda function that generates 7 different coloured versions of the image, stores them on an S3 bucket and the function ultimately returns the URLs of the new coloured images back to the user so they can select their preferred color on the site.

This process takes some time, around 5-6 seconds with a good connection, during which the user can only see a loading screen. Since it's only possible with one callback from lambda, how would I go about to "lazy load" the 7 different coloured images rather than having the loading screen? I would like to have something like a skeleton UI which gradually loads the different coloured images as soon as each of them are generated, rather than having to wait for all of them. Is this possible?

Improve this question

1 Answer 1

Reset to default
1

A better approach might be to return the URLs immediately, before the images are actually generated, because the target URLs will be known. This could be done by having the Lambda function invoke another Lambda to do the actual processing, and then return the URL immediately.

Then, the web app could try to retrieve the images every few seconds.

You could even have the process spawn several Lambda processes in parallel to reduce the time taken to generate all the images (and/or try multi-threading the Lambda to see if that is any faster).

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you! The URL is actually created already at the back-end and is part of the payload (the Lambda is called with PHP through AJAX) so I would already know the URL before invoking the Lambda function. Is there any way to avoid polling and get some kind of trigger once every image is completed? The Lambda function first needs to download the image from S3 before it can generate the images, would it still make sense to spawn multiple processes or would each process need to download the image and thus take additional time? I will certainly look into multi-threading, that sounds interesting.
The only thing that would be sent back to the page would be the response from invoking the Lambda function, and that can only happen once (when the function completes).
Ok clear enough, will look into the approach above, thanks a lot!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.