how to show image for 1 sec after data is loaded from database

how to show image for 1 sec after data is loaded from database

  

Hi,

I had a image(gif) i want to display the image once the preparation is done.i want to show image for 1sec. is there any solution for it.

Regards,

kOUSHIK.

 

Web app or mobile app?

Hi,


You can use javascript to achieve that, for example:

https://teamtreehouse.com/community/how-to-make-a-button-and-text-appear-after-a-delay


Hope it helps you!

Kilian Hekhuis wrote:

Web app or mobile app?

Web app


Daniel Martins wrote:

Hi,


You can use javascript to achieve that, for example:

https://teamtreehouse.com/community/how-to-make-a-button-and-text-appear-after-a-delay


Hope it helps you!

Hi Daniel,

I need to show the image only for 1second after when the data is fully loaded from the database(i.e at the end of the preparation).Do you have any suggestions or solution for it

Regards,

Koushik.



Hi Koushik,


Explanation was in the link: https://teamtreehouse.com/community/how-to-make-a-button-and-text-appear-after-a-delay

However I did a small sample for you in Outsystems, please find the OML attach.

The trick is to set display:none in your img and then use a javascript to show it.

Hope it helps you.

Daniel Martins wrote:

Hi Koushik,


Explanation was in the link: https://teamtreehouse.com/community/how-to-make-a-button-and-text-appear-after-a-delay

However I did a small sample for you in Outsystems, please find the OML attach.

The trick is to set display:none in your img and then use a javascript to show it.

Hope it helps you.

Hi Daniel ,

Thanks for your reply, But i want to display the image until data is loaded (preparation is done) after that the image has to hide and the data has to display.I there any solution for it

Regards,

Koushik

Hello Koushik,

What you want is not possible.
Preparation occours SERVER side, BEFORE the page is built and sent back to the browser.

What is your context and why do you need to do this?

Cheers.

EDIT: If the page is taking too long to show, you can show the image in the PREVIOUS screen, or you can try a Lazy Load approach.

Hi Koushik,

As Eduardo said by default all images displayed on the page will be shown after the Preparation is finished.

If you want a Lazy load aproach to images I suggest to use the following Forge component Blazy:
Lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page.  

Recently I wrote an article about to deliver one component to achived the Lazy loading of images:


https://medium.com/@martinsda/low-code-development-with-outsystems-building-new-components-66eb1499e3cf

Hope it helps you.

Best regards.

Daniel Martins wrote:

Hi Koushik,

As Eduardo said by default all images displayed on the page will be shown after the Preparation is finished.

If you want a Lazy load aproach to images I suggest to use the following Forge component Blazy:
Lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page.  

Recently I wrote an article about to deliver one component to achived the Lazy loading of images:


https://medium.com/@martinsda/low-code-development-with-outsystems-building-new-components-66eb1499e3cf

Hope it helps you.

Best regards.

I am want to show the loading image when the preparation is calling(until data is loaded).


Hello Koushik

I'll assume you did the online or a live training, but forget how the page lifecycle works.
So, I recommend revisit the Screen Lifecycle presentation: https://www.outsystems.com/learn/lesson/878/screen-lifecycle/

What you wants to achieve is not possible the way you want to do, as the answer to the browser will happen AFTER the preparation is executed. 

That's why we suggested to use a Lazy Load approach. This way, you can show the page while your data is being loaded.

Cheers.