Solved

How can I delay loading certain HTML components?

Posted on 2008-10-27
11
2,194 Views
Last Modified: 2013-11-19
Hello-

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!
0
Comment
Question by:kristinzig
  • 4
  • 2
  • 2
  • +3
11 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
"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.
0
 

Author Comment

by:kristinzig
Comment Utility
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?
0
 
LVL 12

Expert Comment

by:ShaneJones
Comment Utility
Have a look at jQuery, There will probably be a solutions there http://www.jquery.com
0
 

Expert Comment

by:jangins101
Comment Utility
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' />" +

			"</object>"

    }

</script>
 

<script language="javascript">

	// Set the timeout to execute the function at 5 seconds

	window.setTimeout(DelayedExecute,5000);

</script>

Open in new window

0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 250 total points
Comment Utility
"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.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 23

Expert Comment

by:Tiggerito
Comment Utility
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!
0
 

Author Comment

by:kristinzig
Comment Utility
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!
0
 

Author Closing Comment

by:kristinzig
Comment Utility
Only partially easy to understand because of the amount of attitude I had to read through before getting to the actual answer.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
kristinzig,
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.
bol
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. :)
0
 

Author Comment

by:kristinzig
Comment Utility
b0lsc0tt:

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.

kristinzig
<html>

<head>

<SCRIPT type="text/javascript">

function delay() {

	document.getElementById("hid").style.visibility="visible";

}

</SCRIPT>

</head>
 

<body onLoad="setTimeout('delay()',5000);">
 

<table>

<!-- a bunch of stuff I want to load -->

</table>
 

<table style="visibility:hidden" id="hid">

<!-- a bunch of stuff I want to delay showing -->

</table>
 

</body>

</html>

Open in new window

0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
:)  Your welcome!  I'm glad I could help.  Thanks for sharing with us how you would implement what I suggested.
bol
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. :)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This video teaches users how to migrate an existing Wordpress website to a new domain.

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now