Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 561
  • Last Modified:

Need to continue displaying an animated .gif after location.replace in all browsers. IE works, not FF.

I have a page that loads with some messaging and an animated gif to show until the next page loads.  For user's with javascript enabled (most people) the .gif loads and then there is a location.replace that executes once the page loads through a body onload.  The .gif doesn't animate anymore once the location.replace is executed.

I found some posts elsewhere suggesting that you could preload the image, which I did, and then reset the image through javascript after the location.replace executes.  That works for ie6, and I suspect ie7, although I haven't been able to check that.

However, it doesn't work for FF.  I also saw some references to using a setting a timeout out or something.

Doesn't someone have a mehod that would work for all browsers.
0
sscotti
Asked:
sscotti
  • 5
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
Show what you have so we do not waste time suggesting the same...

For example

<a href="javascript:changeLocation()">...</a>
will not work with animations since the click unloads the browser

Instead use
<a href="#" onClick="changeLocation(); return false">...</a>
0
 
sscottiAuthor Commented:
Here is an example URL:

http://homepage.mac.com/sscotti/loading.html

The source is:

<html>
<head>
<title>Loading...</title>
<script type="text/javascript">
//preload images when that page loads
var preloadedImg = new Image(56,21);
preloadedImg.src = 'http://homepage.mac.com/sscotti/loading.gif';
</script>
</head>
<body onLoad="location.replace('http://www.dhtmlcentral.com/forums//archive/index.php/t-16787.html');document.images['waiting'].src=preloadedImg.src;");
<div id="loading"> Loading... <img src="http://homepage.mac.com/sscotti/loading.gif" width="56" height="21" alt="Loading..." id="waiting"/> </div>
</body>
</html>

It is trimmed down quite a bit because there was a noscript block and other logic and messaging code on the page, but thee core functionality is here.  The target url for the location replace is one I found on the web that times out.  You'll notice that this works in ie6 and ie7.  It doesn't work in FF.  I'm looking for a way to have it work in both browsers.
0
 
Michel PlungjanIT ExpertCommented:
1. location.replace is quite instant to unload the page
For it to work at all I would certainly change the order

2. it is NAME= if you use document.images[] not ID

 <html>
<head>
<title>Loading...</title>
<script type="text/javascript">
//preload images when that page loads
var preloadedImg = new Image(56,21);
preloadedImg.src = 'http://homepage.mac.com/sscotti/loading.gif';
function loadWait() {
document.images['waiting'].src=preloadedImg.src;");
location.replace('http://www.dhtmlcentral.com/forums//archive/index.php/t-16787.html');
}
</script>
</head>
<body onLoad="loadWait()">
<div id="loading"> Loading... <img src="http://homepage.mac.com/sscotti/loading.gif" width="56" height="21" alt="Loading..." NAME="waiting"/> </div>
</body>
</html>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Michel PlungjanIT ExpertCommented:
Here is a working version
Do not use onLoad

<html>
<head>
<title>Loading...</title>
<script type="text/javascript">
//preload images when that page loads
var preloadedImg = new Image(56,21);
preloadedImg.src = 'http://homepage.mac.com/sscotti/loading.gif';
</script>
</head>
<body>
<div id="loading"> Loading... <img src="http://homepage.mac.com/sscotti/loading.gif" width="56" height="21" alt="Loading..." NAME="waiting"/> </div>
<script>
document.images['waiting'].src=preloadedImg.src;
setTimeout("location.replace('http://www.dhtmlcentral.com/forums//archive/index.php/t-16787.html')",1000);
</script>
</body>
</html>
0
 
sscottiAuthor Commented:
mplungjan:

I'm not sure that is exactly what I'm looking for.  It seems to work fine with the short example, but if the targe page for the location.replace is a heavy page with a large load time, it looks like the .gif is animated for about a second or so and then stops for another 2-3 seconds.  My target load page takes a while to load.  Is it even possible to display an animated gif after the location.replace has executed, in FF anyway.  I have been able to get the original to work in IE.
0
 
Michel PlungjanIT ExpertCommented:
Seems you want to show the animation in a parent page and load the page in an iframe and hide the animation onLoad of the iframe - what you are trying to do does not make sense anyway. You already have the loading icon in the top right corner (throbber)
0
 
sscottiAuthor Commented:
I actually have a solution to my problem using a javascript animation, which I really don't want to use, but it works in all browsers so I'm avoiding the problem with the current arrangement working in IE but not FF.  I still would like to find a method that would work for FF as well.

Here is the skeleton of what I have again:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>untitled</title>
      <meta name="generator" content="TextMate http://macromates.com/">
      <meta name="author" content="Stephen Scotti">
      <!-- Date: 2007-07-27 -->
</head>
<script type="text/javascript">
//preload images when that page loads
var preloadedImg = new Image(56,21);
preloadedImg.src = 'loading.gif';
</script>
<body onload="location.replace('URL that takes long time to load');document.images['waiting'].src=preloadedImg.src;">
      
<div style="width:870px;float:left;">
 <div id="loading"> Loading... <img src="loading.gif" alt="" name="waiting" /> </div>
</div>
<!-- Message and image while page is redirecting -->

</body>
</html>

This works in IE but not FF.  To really see what happens you need a URL for the location.replace that takes a very long time to load.  With that, the FF .gif animation hangs while the IE one works.  I'm looking for a way to get the FF one to work.
0
 
Michel PlungjanIT ExpertCommented:
Yes. The browser is unloaded when location.replace is called.

try this:


<body onload="document.getElementById('wait').style.display='none';
document.getElementById('main').style.display=''">
     
<div id="wait" style="width:870px;float:left;">
 <div id="loading"> Loading... <img src="loading.gif" alt="" name="waiting" /> </div>
</div>
<div style="display:none" id="main">
Long loading content
</div>

</body>
</html>
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now