INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!

Talk With Other Members
Be Notified Of Responses
To Your Posts
Keyword Search
One-Click Access To Your
Favorite Forums
Automated Signatures
On Your Posts
Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Tek-Tips LinkedIn^® Group

Join our
LinkedIn^® Group!

Hook up with past and present colleagues and classmates quickly.

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site

(Download This Button Today!)

Feedback

"...Compliments on a fantastic web site. I have learned so much from my threads and even if sometimes I cannot solve the problem, it gives me the reassurance that I am not the only one putting up with it!..."

More...

Geography

Where in the world do Tek-Tips members come from?

Click Here To Find Out!

Tek-Tips Shirts!

Get your
Tek-Tips Forums
SWAG here!

Home > Forums > Programmers > Web Development > HTML, XHTML & CSS Forum

Animated GIF stops when using AJAX

CODE

// CHANGE OPACITY AND TURN ON ANIMATED GIF
var v2 = document.getElementById("mainDiv");
v2.style.opacity = "0.3";
var v2 = document.getElementById("loaderDiv");
v2.style.display = "block";

// SMALL DELAY TO ALLOW ABOVE CODE TO TAKE AFFECT
// WINDOW DIMS AND ANIMATED GIF STARTS SPINNING
window.setTimeout(function() {

        // GOTO THE SERVER AND GET DATA
    var objHttp = new XMLHttpRequest();
    var objDate = new Date();
    var urlRef = "mobile_expanded.asp?siteId=" + siteId + "&uUrl=" + objDate.getTime();
    objHttp.open("GET",urlRef,false);
    objHttp.send("");
    var strResponse = objHttp.responseText;

        //PLACE DATA IN WEB PAGE
        v1.innerHTML = strResponse;
    v1.style.display = "block";

    //UNDO OPACITY AND TURN OFF ANIMATED GIF.
        var v2 = document.getElementById("mainDiv");
    v2.style.opacity = "1.0";
    var v2 = document.getElementById("loaderDiv");
    v2.style.display = "none";

},1000);

BillyRayPreachersSon (Programmer)

25 Apr 12 20:46

>> Animated GIF stops when using AJAX

You're not using AJAX... you're using SJAX, due to the third parameter in your .open call being false (see here for more).

To quote that page (bolding is mine):

Quote (Wikipedia):
The third parameter, a boolean value indicating whether or not the request will be asynchronous, is not a required parameter by the W3C draft. The default value of this parameter should be assumed to be true by a W3C conforming user agent if it is not provided. An asynchronous request ("true") will not wait on a server response before continuing on with the execution of the current script. It will instead invoke the onreadystatechange event listener of the XMLHttpRequest object throughout the various stages of the request. A synchronous request ("false") however will block execution of the current script until the request has been completed, thus not invoking the onreadystatechange event listener.

It's likely that as well as blocking script executing, the browser is being "tied up" in general, leading to the loss of animation in the GIF. So, have you tried using an asynchronous request instead?

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

@ Code Couch: http://www.codecouch.com/dan/

@ Twitter: http://twitter.com/SleepyDrunkDan

BillyRayPreachersSon (Programmer)

25 Apr 12 20:57

Incidentally, for help with AJAX requests, try forum1600: AJAX, and for help with JavaScript in general, try forum216: Javascript.

Dan

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Back To HTML, XHTML & CSS