How to stop an image flickering in an ajax timer

Question

I have this in markup.

<%@ Page Title="" Language="C#" MasterPageFile="~/Cloud.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="Cloud_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:Button ID="btnPlay" runat="server" Text="Play" ClientIDMode="Static" />
    <div id="divPlayer" style="width: 352px; height: 288px;">hello
    </div>

    <script type="text/javascript">
        $("#btnPlay").click(function () {
            Play();
        });
        var $theDiv = $("#divPlayer");
        var request;    
        var _currentFrame = 1;

        setInterval(function Play() {
            if (request) request.abort();
            request = $.ajax({
                type: "POST",
                url: "Default.aspx/GetNextFrame",
                data: JSON.stringify({
                    CurrentFrame: _currentFrame
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d != "") {
                        $("#divPlayer").css("backgroundImage", "url(" + msg.d + ")"); 
                        _currentFrame++;
                    }
                },
                error: function (msg) {
                    var r = jQuery.parseJSON(msg.responseText);
                    alert(r);
                }
            });
        }, 100);     
    </script>
</asp:Content>

In my code behind I have this:

[WebMethod]
public static string GetNextFrame(int CurrentFrame)
{
 if (HttpContext.Current.Session["Clip"] == null)
{
HttpContext.Current.Session["Clip"] = Directory.GetFiles(@"C:\Portal\Catalogues\000EC902F17F\3\2013\10\6\10\657c2728-c6a5-41d8-bbdf-1815f5b37d5d");
}
string[] _files= (string[])  HttpContext.Current.Session["Clip"];
if (CurrentFrame < _files.Length)
{
string _filename = new FileInfo(_files[CurrentFrame]).Name;
string _imgURL = "\" A URL\"";
return _imgURL;
}
return "";
}

The image 'plays' but there is a flicker. I thought the solution was to just update the URL of the div background to solve this? I have, and I still get a flicker.

Fetching frames via ajax will have latency (=flicker). Probably a bad idea. Also, your server-side code is irrelevant to this question. — Diodeus - James MacFarlane, Oct 07 '13 at 18:58
@Diodeus So, there is no way to avoid the flicker then? Also, the server code shows how I am returning the next url in case anyone asks 'how do i get the next url'? Please explain why it is irrelevant? Thanks — Andrew Simpson, Oct 08 '13 at 05:13
The issue is your methodology itself, not what your server code is executing. You need ALL of the animation data/images on the client in order for it to run smoothly - not across an AJAX call. — Diodeus - James MacFarlane, Oct 08 '13 at 13:29
@Diodeus Hi, thanks for the response. When i posted this question in a different way I was told it was possible if i just changed the url. So, i did that and it flickers. I posted the server code because i have had cases when i ask a question and I am asked how I did such a thing even though it is irrelevant to the question focus. So, to pre-empt such a waste of time I posted the server code which is not vast and helps puts it in context, I do not think it is such a big sin to do so. You obviously think it is... :) — Andrew Simpson, Oct 08 '13 at 14:21
However, your comment about having it available on the client before playing to eliminate flickering is correct. For that matter I am using a sprite which works. So, I give you a plus for your comment — Andrew Simpson, Oct 08 '13 at 14:27
Aside from making a GIF animation, sprites are probably your best bet. — Diodeus - James MacFarlane, Oct 08 '13 at 14:48

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

Check the size of your image. The larger the size the more it will take to render and the larger the flicker.
If you can, load all the images first so that you don't have to go server side to get the next image. Might improve on perceived performance.
Try using two divs and hide/show them in an alternating fashion. This might eliminate flicker due to the primary div reloading.

edit

Using C# code, you could build an animated gif and return that instead of a series of frames.

This might help; how to create an animated gif in .net

edited May 23 '17 at 10:31

Community

1
1

answered Oct 07 '13 at 23:09

griegs

22,624
33
128
205

Thanks for the info.The size of the image is only 352x288 at a total of 9kb so it is not that vast I would have thought. The number of images could be greater than 3000 so I would not have thought loading all images would be useful I am afraid in this case. I know how to use an animated gif and I had used a sprite before which worked but again it is the number of images that may be required that will cause extra management. The div idea I had also considered as a form of 'caching'. Still using ajax I thought it would have been possible to do this. – Andrew Simpson Oct 08 '13 at 05:18

How to stop an image flickering in an ajax timer

1 Answers1