Update image without flickering ASP.NET C#

Question

Im writing a web site which has a page that must show an image. This image is created by an HttpHandler using querystring commands, how can I make this works without any kind of flickering?

Thanks in advance, if you need some code Im happy to share it!

Answer 1

I used the following code for a project, where I had a similar problem. Maybe this can help solve your issue.

 (function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

After preloading the images, the transition was very smooth.

p.s. I don't remember where I got this, so I can't give credit. Sorry.

Answer 2

You could use 2 UpdatePanels and switch them after each "reload":

Load Frame1 into Panel1 and hide Panel2 at Postback/Pageload
Load Frame2 into Panel2 per AJAX and after the Image is loaded show Panel2 and hide Panel1
Load Frame3 into Panel1 per AJAX and after the Image is loaded show Panel1 and hide Panel2
aso....

You then could even make a smooth fading from Panel1->Panel2 using JS (see HERE or easier with jQuery fadeIn() and fadeOut()).