Question

Whilst waiting for ‘real-time’ data from the server, I want to display a gif image. Otherwise the client sees nothing and doesn’t know about the status of their request. With a gif image such as an ‘egg-timer’ for instance they would at least know that the request has been sent and client is now awaiting a response.

This is how I coded it:

  websocket.onmessage = function(data){
     while (!data){
     $("#display").append('/templates/image.gif');
     }
     CODE THAT IS EXECUTED ON RECEIPT OF data
    }

I’m using websockets for the communication protocol between client and server. But the gif image is not displayed whilst waiting for data from the server.

I’m a newbie to javascript so not sure what id wrong

EDIT

Thanks for the help, your suggestions got the gif image to work.

BUT the image I get is not a gif but what looks like a broken picture icon in (Chrome and nothing in Firefox). This is the code now:

$("#display").append('<img src="/templates/image.gif" />');
websocket.onmessage = function(data){
         CODE THAT IS EXECUTED ON RECEIPT OF data
}

The gif file is ok and in the right directory.

Thanks

Answer 1

I think you should be using:

$("#display").append('<img src="http://www.yourhost.com/templates/image.gif" />');

instead of:

$("#display").append('/templates/image.gif');

Alternatively you could also create a simple css class as follows:

.loading {
    display: block;
    width: 16px;
    height: 16px;
    background: transparent url('/templates/image.gif') no-repeat center center;
}

and then do :

$("#display").append('<span class="loading"></span>');