Load Object Last (using JS)

**diabolo** · 01-14-2008 02:54 PM

If you have a website that has ads that just take to long to load, and prevents the user from seeing your website as quickly, then you're in the right topic! I'll show you how to load any object you want, in relation to other objects.
First, we got to understand that a browser reads the HTML from top to bottom, so if you have a script for the ad on the top of your page, the browser is going to have to finish reading that, then it goes onto the rest of the content.
What we are going to be doing here is placing the code at the bottom, and refering back to a <span> at the top of the page..so now onto the tutorial

Code:

<html>
<body>
<span>Some ad here</span>
Main Content
</body>
</html>

as you can see I have a very, very basic webpage...(I don't even think it qualifies, but it works for what we are doing)

Code:

<html>
<body>
<span="ad"></span>
Main Content
<script language="javascript">
document.getElementById("somethingloadlast").innerHTML = "Some Ad Here";
</script>
</body>
</html>

as you can see, I have gave the <span> and id, and refered to it at a script on the bottom of the page, after all the main content is loaded.

This will load the ad after 'Main Content' has been loaded.

**Synkc** · 01-22-2008 10:40 PM

Interesting tutorial; I don't usually work with JavaScript, but this could be useful for me, thanks.

**bigjoe4** · 01-23-2008 10:46 AM

That's well usefull thanks

**diabolo** · 01-23-2008 09:37 PM

glad I could help

**Jesse** · 02-11-2008 04:05 PM

Thanks for the tutorial.

**tgkprog** · 03-02-2008 10:50 PM

hi i think below is better - with a timer and fixed size so the page contents do not move when the ad appears

Code:

<html>
<body>

<!-- adding the size helps as the page does not jump when the advertisment  content is inserted -->
<div id="somethingloadlast" style="size:absolute; height : 300; width: 100%">&nbsp;</div>

<br/>
Main Content
<script language="javascript">
var tmrHandle = setTimeout("startAds()", "200");//200 milliseconds after page loads
function startAds(){
	document.getElementById("somethingloadlast").innerHTML = "Some Ad Here with images too <br/><img src=\"i1.jpg\"> ... ";
	//can use a iframe to - insert another page - maybe a generic page with ads for all pages - cahnge in one place
	//document.getElementById("somethingloadlast").innerHTML = "<iframe src=\"../ads.html\" height=\"400\" width=\"100%\"></iframe>";
}
</script>
</body>
</html>

Edit:
also in your example you have

Code:

...
<span="ad"></span>
...
document.getElementById("somethingloadlast").innerHTML = "Some Ad "....

i think it should be

Code:

...
<span id="ad"></span>
...
document.getElementById("ad").innerHTML = "Some Ad "....

Edit:
If you like my posts then press the blue tick on the top right corner of my post /\

**nightscream** · 01-25-2009 04:01 PM

Never came up with this, it's logic :p

**Twinkie** · 07-27-2009 12:57 AM

Another way to do this to allow all content within the container is to load an add in a span/div element, with display off, and then call a JavaScript function with the onload property to change the parentNode of the ads container to an element at the top of the page. I would post source code, but I don't want to hijack diabolo's tutorial.

Thread: Load Object Last (using JS)

LinkBack

Thread Tools

Display

Load Object Last (using JS)

Re: Load Object Last (using JS)

Re: Load Object Last (using JS)

Re: Load Object Last (using JS)

Re: Load Object Last (using JS)

Re: Load Object Last (using JS)

Re: Load Object Last (using JS)

Re: Load Object Last (using JS)

Similar Threads

Images won't load on addon-domain (may need admin support)

Website doesn't load

Site load extremely slow with PHP ads

Sever Load!!!!!!! 10

vBulletin - Optimization !!!!!

Posting Permissions