How to update a dynamically generated asp:image in an UpdatePanel without flickering?

Question

I've tried a few approaches and did a bit of searching, but can't seem to find a working solution, so would like to ask for your combined wisdom.

I generate a jpg file on-the-fly based on text that a user types in. I then assign it to an asp:image control with a random number appended to get around browser caching.

The asp:image is inside a conditional updatepanel that gets refreshed when a hidden button is clicked. It all works nicely, except that the when the updatepanel refreshes the image, it flickers.

I've tried using two images and swapping them and I also tried hiding/showing two CSS divs (one on top of the other), but neither way seems to be stopping the flickering. I've also read a bit on using jQuery's fadeIn/fadeOut to stop flickering, but it doesn't seem to work for me either, or I'm doing something wrong. I can see the image fading out and then fading in, but it flickers in the middle, when it's actually updated by the updatepanel.

I'm happy to post snippets of code, if needed. Just let me know what you need to see.

Thanks in advance!

Answer 1

Couldn't find a working solution, so going with client-side JavaScript instead.

Answer 2

Dynamically add updatepanel and updatepanel triggers, this will solve the problem.