Load Object Last (using JS)

diabolo

diabolo

Community Advocate
Community Support
Messages
1,682
Reaction score
32
Points
48
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.
 
Last edited:
Synkc

Synkc

Active Member
Messages
1,765
Reaction score
0
Points
36
Interesting tutorial; I don't usually work with JavaScript, but this could be useful for me, thanks.
 
T

tgkprog

Member
Messages
226
Reaction score
0
Points
16
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 /\
 
Last edited:
Twinkie

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
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.
 
You must log in or register to reply here.
Top