Question

I have an application with different components that are accessible through a viewstack in the main application.

The main application looks like that:

<Application>
    <Viewstack>
        <myComponent1/>
        <myComponent2/>
        <myComponent3/>
        .
        .
        .
    </Viewstack>
</Application>

In myComponent1, I have a horizontalList where the user can select a product.
In myComponent2, I have 2 containers inside the component. A left container with a larger image of the product selected in myComponent1 and a right container with all characteristics of the product.
Both containers have an embed background image.

When I select a product in myComponent1, the application displays myComponent2. When the component is displayed, I first see the page without the large image of the product, then both containers flickers and the product image is displayed.

How could I avoid this flickering? It’s really annoying >_<

Thanks in advance for your help =)

Regards.
BS_C3

Answer 1

I’ve figured out why the image is flickering.
I have the same kind of image loading in other components but it only flickers in this one.

My guess is that the image is too big and the loading takes some time.

I’ll load all the images when the application is launched so that they will be in the browser’s cash.

Hope this solution will help somebody.

Regards.