How can I delay loading certain HTML components?

Posted on 2008-10-27
Medium Priority
Last Modified: 2013-11-19

I am trying to delay the loading of a portion of an HTML page.  Essentially, I want to load part of the body, delay 5 seconds or so, and then complete the loading process.

I do not want to redirect using onLoad in the body tag, rather, make a section of the html "wait" to be rendered on the screen.

The reason being is the headlines in the second half of the body compete with a flash component in the first half of the body so "they" would like to stall the rendering of the second half of the page/body content.

I appreciate your help!
Question by:kristinzig
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +3
LVL 44

Expert Comment

ID: 22817812
"so "they" would like to stall the rendering of the second half of the page/body content."

Incorrect assumption.  Loading of a web page is SERIALIZED -- nothing new loads until the previous line of code has finished loading.  Nevertheless, if you are paranoid about this, what you do is put the MAIN part of your page as HTML, then you load the flash, and then you put javascript at the END of the document, just before he closing <BODY> tag to load the rest of the page.  That will do what you want.  However ...

THat is not the right way to do it -- you load the HTML first and the flash last -- since flash takes so long to load, if you hold up the page loading just for the flash, people will leave before the page is finished loading, because people like me want to see what you have to offer FIRST, flash intros are IRRELEVANT to what your page has to offer them in information.  Web makers love flash, and users HATE it.

Author Comment

ID: 22817850
Thank you for your response -- I wholeheartedly agree this is not the right way to do this.  However, this is the way they want it done.

Let's say I didn't have the flash component involved here, is there a way to just load part of the body, delay, and then load the rest?
LVL 12

Expert Comment

ID: 22818352
Have a look at jQuery, There will probably be a solutions there http://www.jquery.com
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.


Expert Comment

ID: 22818415
Well, one thing that you could potentially do is create a div and then use Javascript to change the innerHTML of that div to the flash code. Then, you can use the window.setTimeout function to execute the function that will load the div after whatever amount of time you want.

// In the regular page
<div id="DelayedSection"></div>
// In a script
<script language="javascript">
    function DelayedExecute()
        var el = document.getElementById("DelayedSection");
        el.innerHTML = "" +
			"<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='550' height='400' id='MyFlashFile' align='middle'>" +
			"<param name='allowScriptAccess' value='sameDomain' />" +
			"<param name='movie' value='MyFlashFile.swf' />" +
			"<param name='quality' value='high' />" +
			"<param name='bgcolor' value='#000000' />" +
			"<embed src='MyFlashFile.swf' quality='high' bgcolor='#000000' width='200' height='200' " + 
				"name='MyFlashFile' align='middle' allowScriptAccess='sameDomain' " +
				"type='application/x-shockwave-flash' " +
				"pluginspage='http://www.macromedia.com/go/getflashplayer' />" +
<script language="javascript">
	// Set the timeout to execute the function at 5 seconds

Open in new window

LVL 44

Accepted Solution

scrathcyboy earned 1000 total points
ID: 22819087
"is there a way to just load part of the body, delay, and then load the rest?"

As I already said, the only way to "pause" page loading is to EITHER do it from server code, where part of the page is sent to the browser, then the server code waits some time period, and then sends the rest (which means making the page in PHP or ASP) -- OR

The only other alternative is to have PART of the code in the BODY of the page, and have javascript at the END of the body code composing the rest of the page in javascript -- and that doesn't work very well if it is normal HTML.  

So the answer to this question really is, yes it can be done from server code, but it wouldn't be sensible to do it.  I think "they" don't understand that FLASH takes 10x longer to load than an HTML page, and if you hold up page load for a flash that most people view as "secondary" to the page, you will alienate almost all of the viewers.  You will also kill the ability of search engines to tractor the page and index it correctly, because they DEFINITELY will not wait for this delay.  So it is a ill-conceived idea, I think.
LVL 23

Expert Comment

by:Tony McCreath
ID: 22821129
I've been in this "well its what the client wants" argument before.

The next one is "why don't I get any traffic" and when you expain they say "why did you use flash then".

No matter what, expain to them that flash is a bad move. If they still want it. Make sure you can prove you gave them the warning. Clients are good with selective memory!

Its not always bad though. One client insisted on flash, then paid us to run an adwords campaign to get traffic, and are now ordering a re-design that works with search engines. All on one year!

Author Comment

ID: 22823593
Thank you -- while this isn't the forum for issues with the client or how to deal with them I most certainly appreciate the timely responses and all solutions and insight to creating this "workaround".

It's a small page (and the flash movie is small in nature as well) so generating the second portion of the body by invoking javascript at the end of the page to cause a 5 second delay and then generate the remaining html works nicely, on IE, Firefox, Opera and Safari.

Thanks again!

Author Closing Comment

ID: 31510569
Only partially easy to understand because of the amount of attitude I had to read through before getting to the actual answer.
LVL 54

Expert Comment

ID: 22826469
Interesting question and it does seem you hit a bit of a "hot" button with some experts.  I believe it was mainly the fact that there is Flash involved which can complicate many things.  That isn't really your question here though and it seems you have even got the answer you want.  Scrathcyboy did provide great info on the options and even the issues.  Since I prefer to do things server side I would try to use his first suggestion but that may not work well depending on the page layout.  I can think of a third option but it is related to the second since it uses javascript.
As mentioned the browser just loads what it gets and we can't really tell it to stop.  However it seems you don't necessarily want it to stop but just don't want the user to see the bottom right away.  My thought is to use style to hide it.  The method is pretty well supported by browsers, especially the latest and common browsers, and can work on various layouts.  On a non-Flash page I can almost guarantee it will work but I don't know if Flash would cause a problem.  I doubt it will in seperate sections.  With specific html I could be more sure or specific though.
The parts of style (i.e. CSS) to use are display or visibility.  The former is better supported from my experience and often what people want.  It hides not only the content but even the element and the space it would take.  If your layout can support hiding and showing the element or section then it is a great way to seem to change the page's look or content.  You provide the value of none to hide the element and erase it or assign block/inline to show the element.
The second property, visibility, will leave the element or sections place in the page but just hides it from view.  The value to hide is hidden and the value to show is visible.  It seems like there are some browsers or cases where this doesn't work as well as display though.  From what you describe though I think you could use either and this may be nice to not have the vertical scroll bar change or have the page all of a sudden grow.
Javascript would be used with either to set a timer that would then show the element or section.  I say element because you could have the "second half" in a div element and use that single element as a container.
Just wanted to provide a 3rd option.  If you are interested in pursuing it then you could open a new question or possibly ask to have this reopened.  Your grading comment makes it seem like you are satisfied with the answer here though and my intention is not to take from that.  I do hope this will help.  Good luck with the project.
p.s.  Thanks for how you handled yourself here.  Even though you generalized this to omit the Flash component it seemed to be a bit of a focus and distraction.  Even though it seemed you were frustrated great job on responding to it.  I hope this helps. :)

Author Comment

ID: 22826879

Thank you very much -- I blanked on the fact that I could make a table (and everything in it) hidden upon loading., and got caught up with an incorrect implementation of setTimeout....etc....rather than leveraging styles.  The final solution is actually very succinct.

I've attached the code snippet that illustrates the solution.  I appreciate your answer and thoughts.

250 virtual points to you.

<SCRIPT type="text/javascript">
function delay() {
<body onLoad="setTimeout('delay()',5000);">
<!-- a bunch of stuff I want to load -->
<table style="visibility:hidden" id="hid">
<!-- a bunch of stuff I want to delay showing -->

Open in new window

LVL 54

Expert Comment

ID: 22826934
:)  Your welcome!  I'm glad I could help.  Thanks for sharing with us how you would implement what I suggested.
p.s.  Now I am 1000 points closer (250 points x 4 for A grade) closer to a virtual certificate.  The hard thing is knowing what my total is and where I rank this year in total virtual points earned. :)

Featured Post

Setting up LaraDock for Laravel

Learn how to set up LaraDock in a Laravel project - LaraDock gives us an easy way to run a Laravel application using Docker in a single command.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question