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()”>
<iframe scrolling=”no” frameborder=”0” id=”iFrameLoadingImg” src=”loadingGIF.html” width=”100px” height=”100px”></iframe>
</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.
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.<html>
<head>
<title></title>
</head>
<body>
<img src=”img/ajax-loader.gif” />
</body>
</html>
-
alanfeekery posted this
