How to maintain a .gif animation after a page postback (cross browser solution)

So, this has been quite a difficult thing to do, so many sources online are either outdated or only address the IE problem and not Firefox.

So here is a very simple, easy & reliable way to make a gif animation continue animating on a pleasewait page. Please note, I use jQuery in this example.

PleaseWait.html – The redirect page that will show the gif via another page using an iframe tag. This page has a body onload call to a javascript function that makes the browser load the actual web page that will be slow loading, in this case, SlowPageToLoad.html.

<html>

<head>

    <title>Loading… Please Wait</title>

<script src=”js/jquery-1.4.4.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

        function redirect() {

            $(“#iFrameLoadingImg”).attr(“src”, “loadingGIF.html”);

            window.location.replace(“SlowPageToLoad.html”);

            $(“#iFrameLoadingImg”).attr(“src”, “loadingGIF.html”);

        }

    </script>

</head>

<body onload="redirect()">
      
      <!-- Change "area" to "iframe" as wordpress does not allow me to show iframe source code for security purposes -->
      <!-- Also make sure your width & height properties are set to the same size as your ajax-loader.gif on loadingGIF.html -->
      <area id="iFrameLoadingImg" src="PleaseWait.html" scrolling="no" frameborder="0" width="220px" height="40px"></area>  

</body>

</html>

LoadingGIF.html – This is the page in which contains the actual animating gif img, it is a simple html file that is loaded into our PleaseWait.html page using an iframe tag.

<html>

<head>

<title></title>

</head>

<body>

<img src=”img/ajax-loader.gif” />

</body>

</html>

I hope you find this helpful, if you are unsure how to use this example you can just ask me on twitter, I will be glad to help.

Advertisements

Published by

Alan Feekery

Developer, Gamer, Musician, Cyclist and big Motorsport fan... enjoys the odd cup of coffee :)

4 thoughts on “How to maintain a .gif animation after a page postback (cross browser solution)”

  1. Excellent solution – many thanks for posting this.

    Just a heads up: looks like the iFrame code that should be in PleaseWait.html has got filtered out in your post. Was pretty easy to guess what it should be, but the omission might throw a novice. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s