How to prevent the white 'flash' on page load?

Making swf load last on a web page

  • I have got a web page (www.rdfinternational.com/default3.asp) which has got lots of gifs and a piece of flash. I want to set it up so the flash doesn't download until all the gifs are loaded (At the moment the flash movie and the gifs download simultaneously, meaning that it takes a long time for the page to look OK on a modem). I think this can be done in Javascript using 'onLoad', but I don't understand enough about Javascript to make this work. What is the code I need to write to make this happen?

  • Answer:

    Ok, this is pretty complicated but I'm going to try to explain it as simple as I can... This works using Javascript and the onLoad event, as you said. It's a little more complicated because you have to modify the Flash movie as well. I'll explain how it works as I go along. In your HTML, your body tag looks like this: <BODY onLoad="MM_preloadImages('images/nav01ov.gif','images/nav02ov.gif','images/nav03ov.gif','images/nav04ov.gif','images/nav05ov.gif','images/nav06ov.gif','images/nav07ov.gif','images/nav08ov.gif','images/nav09ov.gif','images/rgtmoreov.gif');" LEFTMARGIN="0" MARGINWIDTH="0" TOPMARGIN="0" MARGINHEIGHT="0" TEXT="#330000" LINK="#ff6600" ALINK="red" VLINK="#666666"> You need to add "window.document.myFlash.SetVariable('loaded', 'true');" to the onload command to make it look like this (fyi, your rollover code generates an error in ns 4.7, you might want to get it looked at): <BODY onLoad="window.document.myFlash.SetVariable('loaded', 'true'); MM_preloadImages('images/nav01ov.gif','images/nav02ov.gif','images/nav03ov.gif','images/nav04ov.gif','images/nav05ov.gif','images/nav06ov.gif','images/nav07ov.gif','images/nav08ov.gif','images/nav09ov.gif','images/rgtmoreov.gif');" LEFTMARGIN="0" MARGINWIDTH="0" TOPMARGIN="0" MARGINHEIGHT="0" TEXT="#330000" LINK="#ff6600" ALINK="red" VLINK="#666666"> Next, you need to modify your Javascript code. Your code currently looks like this: var oeTags = '<OBJECT' + 'WIDTH="400" HEIGHT="250">' + '<PARAM NAME="MOVIE" VALUE="test.swf">' + '<EMBED SRC="test.swf"' + 'WIDTH="400" HEIGHT="250">' + '</EMBED>' + '</OBJECT>'; Make it look like this (just copy and paste): var oeTags = '<OBJECT' + 'WIDTH="400" HEIGHT="250" name="myFlash">' + '<PARAM NAME=movie VALUE="test.swf">' + '<EMBED SRC="test.swf"' + 'WIDTH="400" HEIGHT="250" swliveconnect=true name="myFlash">' + '</EMBED>' + '</OBJECT>'; That's the easy part :-) Now you have to modify your flash movie. If you don't have access to the flash file, you better get it. If not, it's impossible to do what you're asking. If you don't know how to follow the below instructions, you need to hire a good web developer to do it for you. Just give him the instructions and he should know what to do. If not, you need to hire a different developer :-) This is the easiest (and probably only) solution to your problem. At the beginning of your flash movie, you need to add three blank keyframes. In keyframe number one, insert a dynamic textbox with the name "loaded", value "false". In keyframe number two, insert the below action script: if (loaded == "true") { gotoAndPlay (4); } In keyframe number three, insert the below action script: gotoAndPlay(2); Ok, that's it. The onLoad event will send a message (using javascript) to the flash movie saying the loaded variable now equals "true". Meanwhile, the flash movie is running in a loop while it's waiting for the loaded variable to equal true. As soon as javascript tells flash the variable equals true, flash plays the rest of the movie. Until then, flash just displays a blank screen while the images are loaded. Make sense? Well, I hope I've helped you. I know you stated you don't understand Javascript very well, but this is the only solution so I hope you'll be able to figure it out. If it doesn't work for you, or you run across any problems, please don't hesitate to ask for clarification. I've verified it actually works here: http://www.affiliateindex.com/ga/imagesbeforeflash.htm (notice how the images all load before it says "hi!!") Thanks for the question and if you require more information regarding my answer, don't hesitate to ask for clarification. And if you find this answer satisfactory, please feel free to rate it. Thank you! xemion-ga

andyb-ga at Google Answers Visit the source

Was this solution helpful to you?

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.