C#•3y ago

Image switching on bool change [Answered]

Hello, I have an image in a Blazor Server app that changes as a boolean value changes. The image flip happens, but the image flickers before being rendered to the screen. This only happens sometimes, so I figure it has something to do with the rendering speed. I am rendering it like so:

                            <BSCol ColumnSmall="3" style="padding: 0; margin: 0;">
                                @if (isRT2 || isRT2HMD)
                                {
                                    <BSImage Source="Images/rt2Bar_t.png" style="padding: 0; margin: 0; width: 101%;" alt="Table" />
                                }
                                else
                                {
                                    <BSImage Source="Images/rt2_t.png" style="padding: 0; margin: 0; width: 101%;" alt="Table" />
                                }
                            </BSCol>

                            <BSCol ColumnSmall="3" style="padding: 0; margin: 0;">
                                @if (isRT2 || isRT2HMD)
                                {
                                    <BSImage Source="Images/rt2Bar_t.png" style="padding: 0; margin: 0; width: 101%;" alt="Table" />
                                }
                                else
                                {
                                    <BSImage Source="Images/rt2_t.png" style="padding: 0; margin: 0; width: 101%;" alt="Table" />
                                }
                            </BSCol>

TLDR: image flickering on bool value change in blazor

7 Replies

TheBoxyBear•3y ago

It takes some time to request the image and display it. You could try caching the image in some way. I'm not aware of official ways to do it but you could try rendering it as 0x0 pixels or hiding it behind the first image

Mayor McCheese•3y ago

You can use a sprite sheet

Mayor McCheese•3y ago

https://css-tricks.com/css-sprites/

Chris Coyier

CSS-Tricks

CSS Sprites: What They Are, Why They're Cool, and How To Use Them |...

This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision

DeterminismOP•3y ago

Went with hiding it, thanks

Sossenbinder•3y ago

I also ran into this once, hiding helps indeed - Having two images on top of each other, showing the "flipped" one on demand instead of rendering it worked fine for me

Mayor McCheese•3y ago

sprites can help with load times as well If this is complete don't forget to mark as answered

Accord•3y ago

✅ This post has been marked as answered!

Gaming

Programming

Image switching on bool change [Answered]