Welcome to WebmasterWorld Guest from 3.80.6.254

Forum Moderators: open

Message Too Old, No Replies

Loading Flash after rest of page

works in IE but not NS or Opera

     
12:41 pm on Aug 22, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:177
votes: 0


I have a very small flash file (start.swf) in my page with an id of "start". This is then accessed via javascript as shown below.

In the head section:
<script type="text/javascript">
<!--
function playMovie(){
window.document.start.LoadMovie(0, "home-page-anim.swf");
}
-->
</script>

And then:
<body onload="playMovie()">

Once the page has finished loading, the javascript tells start.swf to load home-page-anim.swf (a much bigger file). This allows my page content and navigation to download before the gratuitous flash anim. Problem is this doesn't work in NS or Opera.

Is there a different reference to 'window.document.start.LoadMovie' that would do it perhaps? Or is this something more fundamental that means it's just not going to work in the other browsers? Or does anyone have a different approach to .swf loading they'd be prepared to share?

Cheers

Stretch

7:42 pm on Aug 22, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


Your text should all download before any images on your page, so it might work to make the browser wait until your images load to open the Flash.

So your body onload could change to this:

onload="t=setTimeout('checkLoad()',1000);"

And then you create a method that checks to see if you images have loaded:


<script type="text/javascript">
var t;
function checkLoad() {
var image1 = document.getElementById("firstImage");
var image2 = document.getElementById("nextImage");
var image3 = document.getElementById("anotherImage");
if (image1.complete && image2.complete && image3.complete) {
window.document.start.LoadMovie(0, "home-page-anim.swf");
clearTimeout(t);
}
}
</script>

I only tested it in IE6, but it seems to work out well.
hth,
g.

6:03 pm on Aug 23, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:177
votes: 0


garann

Many thanks for the reply. Your idea was useful but, unfortunately, there seem to be too many inconsistencies with cross browser js and flash interaction to make the idea of loading one flash file into another a reliable approach.

In the end I have stumped for putting the flash in an iframe which has its location changed on page load. NS 4 was never meant to see the flash anyway so this is working just great. Not as clean as I would have liked but it will have to do.

Thanks again, your reply was most appreciated.

2:10 pm on Aug 28, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 26, 2003
posts:15
votes: 0


well, MY approach is optimizing SWF before uploading on the web--it ususally takes time to view Flash, I don't know anybody who likes waiting. I compress most of SWFs with Flash Optimizer [softinfinity.com] Works great for me...
3:07 pm on Aug 28, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:177
votes: 0


Couldn't agree more about optimising the swf before upload. I use Optimaze and get pretty good results. The swf in question is one element on an html page. It's 99kb after optimising and (for modem users) really slows down the loading of the html as it streams.

It's a shame there isn't a command that orders the loading of page elements. It would be a much cleaner solution than the one I have adopted.

Stretch

3:50 pm on Aug 28, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


Stretch:

This works in IE / NN / Opera:

In the head (<head>):

<script type="text/javascript">
<!--
var loaded = false;
var tmr = null;

function loadTimer() {
if (!loaded) {
var tmr = window.setTimeout('loadTimer()', [b]1000[/b]);
}
else {
window.clearTimeout(tmr);
// window is completely loaded
// do your stuff now
alert("Finished Loading!");
}
}
//-->
</script>

This goes just before the closing body tag (</body>):

<script type="text/javascript">
<!--
void(window.setTimeout('loaded = true', [b]1000[/b]));
//-->
</script>

Then call loadTimer() from the body onload attribute:

<body onload="loadTimer();">

Note: The first 1000 in the head is how often to check if the document done loading, 1000 = 1 second, the second 1000 just before the closing body tag is how long to wait after the parser hits this point before the loaded variable is set to true. This is just some extra padding to make sure all the page is really done.

Jordan

6:23 pm on Aug 28, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:177
votes: 0


Jordan

Thanks, I appreciate the reply. I will try your code tomorrow to see if it makes a difference and report any success.

However, my understanding so far is that it's the interaction between JS and the Flash plugin where the browsers fall apart.

For example,

<script type="text/javascript">
<!--
function doStuff(){
alert("Finished Loading!");
}
//-->
</script>

<body onLoad="doStuff()">


works across Opera, NS and IE. The problem is with the LoadMovie command in
window.document.start.LoadMovie(0, "home-page-anim.swf");

which doesn't behave.

I also tried the Dreamweaver controlshockwave behaviour but with equally erratic results.

It's a real shame that, apparently, there is no elegant solution to this (MM building something into Flash for example).

Thanks again for the reply and as I said, I'll report any success.

Cheers

Stretch

9:27 pm on Aug 28, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


Have you tried creating the <embed> element from within JavaScript? That should avoid your difficulties with the LoadMovie function - although it might create a new set of difficulties..
10:23 am on Aug 29, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:177
votes: 0


garann, not sure I follow what you mean by creating the <embed> element from within JavaScript. Do you mean as a document.write or something?

Could you elaborate a bit?

(Jordan: no luck with the timeout method. Thanks anyhow.)

10:39 am on Aug 29, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


Stretch:

Something like this:

function makeFlash() {
var ebd = document.createElement("embed");
ebd.src = "home-page-anim.swf";
ebd.height = "100%";
ebd.width = "100%";
document.getElementById("flashholder").appendChild(ebd);
}

...
<div id="flashholder"></div>
...

Then call makeFlash() when you are ready for the movie to show.

Jordan

1:27 pm on Aug 29, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:177
votes: 0


That's got to be the closest so far Jordan. Soooo close. Perfect in IE and NS.

But... Opera won't play. Something to do with the 'embed' element I think. If I replace that for 'image' (and replace the .swf for a .jpg) Opera shows it fine (so does IE but this time NS gives up).

I also tried 'object' (only NS works with that) and tried adding additional parameters (i.e ebd.type = "application/x-shockwave-flash") but no joy.

Ah well. I hadn't come across document.createElement before so it was well worth spending some time with.

Thanks for the help.

2:34 pm on Aug 29, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


No problem. Sorry it didn't work out right. But I think between garann's image-load-checker thing and suggestion to create the embed element dynamically, and my load timer thing, someone, somewhere, sometime will find it useful (law of statistical averages). ;)

At least you learned a new method, which is always useful! Check out the replaceChild() and removeChild() methods as well. They can also be lifesavers when used in conjunction with the createElement() method. :)

Jordan

3:54 pm on Aug 29, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


You know what? You could just put the Flash movie in a div, and set its display to none. Then use Jordan's timer or my check images thingy or just run some script from the bottom of the page to change that display to block.

I did test this in IE, Opera, and NS7. Works fine, the movie doesn't start until the div is displayed. I tested using a link, not a timer, but it shouldn't make any difference.

2:15 pm on Sept 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:177
votes: 0


garann - sorry it took a while to reply, I had an entire weekend away from the PC :o

Anyway, I've just tried your idea and it work's an absolute treat. Thank you - it's a brilliant solution.

It's such a simple way of doing it and it works across all browsers as you say.

Again many, many thanks. I'm a very happy camper :-)

1:49 am on Sept 2, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 2, 2003
posts:47
votes: 0


I have been looking for two days for code like this!

So for the header tag use...

<script type="text/javascript">
<!--
function doStuff(){
alert("Finished Loading!");
}
//-->
</script>

body use...

<body onLoad="doStuff()">

<div id="doStuff"></div>

<script type="text/javascript">
<!--
void(window.setTimeout('loaded = true', 1000));
//-->
</script></body>

?

I am still a bit confused.

Thanks!

11:11 am on Sept 2, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:177
votes: 0


Hi solokron

Here's what I did in the end:

In my external css I have a div assigned:


#image {
display: none;
etc...
etc...
}

On my page I have:

<div id="image">
<object type="application/x-shockwave-flash" data="my.swf" id="start" name="start" width="100" height="100">
<param name="movie" value="my.swf" />
<img src="my.jpg" width="100" height="100" alt="blah" />
</object>
</div>

And then my body tag:


<body onload="document.getElementById('image').style.display = 'block'; ">

Works a treat for me.

Cheers

Stretch