A banner javascript slows down my site - suggestions?

tomzl · 09-15-2004, 04:08 PM

I have a script for rotating banners on my page. A company sells banners on pages that join their advertising system. I put their code on my page and now it is slowing it down because the whole page waits for the banner to load before it shows the rest of the contents of my page.

I am a complete newbie when it comes to scripts but I remember seeing a script for roll over images that preloaded all the images so that when someone went over the pic with their mouse, a roll over image immediately appeared.

This made me think that if there is a preload function, there must also be a postload? function. A function that tells the script to only start working after the rest of the page has been shown.

I'm sure this sounds stupid but I don't know any other way to describe it. Any help or advice where to look for a solution to this problem would be greatly appreciated.

NanakiXIII · 09-15-2004, 04:45 PM

Use an onLoad event in your body tags to call the javascript.

tomzl · 09-15-2004, 05:49 PM

This is the part that I have to paste in my html in order for the banner to work.


<SCRIPT LANGUAGE="javascript1.1" SRC="http://ads.centraliprom.com/central.bin/adimpr?i=ohksa3wj&k=1&s=468x60"></SCRIPT><NOSCRIPT><a href="http://ads.centraliprom.com/central.bin/adclick?i=ohksa3wj&k=1&s=468x60"><img src="http://ads.centraliprom.com/central.bin/adimpress?i=ohksa3wj&k=1&s=468x60" width="468" height="60"></a></NOSCRIPT>


Could you tell me how exactly to write the onLoad event into the body tag?

<body onLoad ...?>

Roy Sinclair · 09-15-2004, 07:18 PM

You must have a tables based web page, that makes it easy for advertisers to ensure your page won't display until their advertisement is ready for display with the page. If you want to fix this without performing major surgery on your web page the best thing you can do is to adjust your web page so the code for the advertisement is totally outside any <table></table> tags.

I would also contact the advertiser and demand they upgrade their servers or their link to the web, being slow is not excusable. You might want to double-check whatever contract you have with them to see if there are any "performance" clauses you can directly demand they live up to.

NanakiXIII · 09-15-2004, 07:21 PM

I'm not sure how to call external scripts onLoad, plainly onLoad="url" might work, but I've never tried. Maybe someone else might help you with it.

But try Roy Sinclair's first. It'll probably work.

tomzl · 09-15-2004, 07:55 PM

My first action was to e-mail them and ask them why their script slows down my page. They didn't reply so I was forced to find an answer elsewhere.

Roy, I tried putting the banner outside any tables and it did help with loading my page better. Thanks a lot.

However, I would still like to find a better solution which would allow me to put banners into tables as well since I would like to put them on my forum which gets most of the traffic. Anyone have an idea how to do this?

Roy Sinclair · 09-15-2004, 08:00 PM

One dirty little secret about tables is that the browser has difficulty deciding how wide cells have to be and how tall they have to be until it has the full content of the cell available. The newer browsers try their best to render as much of the page as they can and will go back and readjust the page to fit if they have to but there are simple techniques to ensure that the content of the table isn't rendered until it's all available and when the table is pretty much your whole page (ie a table based layout) then just one element not yet received can hold up the rendering of the whole page (which is what you're experiencing). Advertisers are very aware of that and will make sure their content falls into that category because they want to make sure that a sufer hitting a page with their ad on it doesn't find a link to the next page until they've seen the ad.

jamescover · 09-15-2004, 09:55 PM

One way:

create an iframe in your main page:

<iframe name="adFrame" src="" width="475" height="75" align="center" frameborder="0"></iframe>

Ad this to the <body> tag of your main page:

<body onload="javascript:window.adFrame.location.href='adScript.html'";>

Put the ad script in a page named adScript.html

-james

Willy Duitt · 09-15-2004, 10:34 PM

Theoriticaly, this should work:

Code:

<body onload="loadBanner()">


Load Banner wherever script is placed:
<!-- ZACETEK CENTRALIPROM.COM OGLASI -- © 2000-2003 IPROM d.o.o, Ljubljana -->
<script type="text/javascript" id="banner">
  function loadBanner(){ 
   var banner = document.getElementById('banner');
   var script = document.createElement('script');
       script.type = 'text/javascript';
       script.src = 'http://ads.centraliprom.com/central.bin/adimpr?i=ohksa3wj&k=1&s=468x60';
       banner.parentNode.insertBefore(script,banner.nextSibling);
  }
</script>
<NOSCRIPT>
<a href="http://ads.centraliprom.com/central.bin/adclick?i=ohksa3wj&k=1&s=468x60">
<img src="http://ads.centraliprom.com/central.bin/adimpress?i=ohksa3wj&k=1&s=468x60" width="468" height="60"></a>
</NOSCRIPT>
<!-- KONEC CENTRALIPROM.COM OGLASI -- © 2000-2003 IPROM d.o.o, Ljubljana -->

.....Willy

tomzl · 09-16-2004, 12:30 AM

Jamescover's idea works great, I haven't tried the other one yet. The only problem remains if the banner is a resizable one that folds down when you go over with your mouse but I can live with that.

You guys are great, thank you for all the help and in such a short time period.

jamescover · 09-16-2004, 05:29 AM

Ummm, I hope you changed this typo:

<body onload="javascript:window.adFrame.location.href='adScript.html'";>

to this:

<body onload="javascript:window.adFrame.location.href='adScript.html';">

-james

tomzl · 10-05-2004, 06:32 PM

I tried all the suggested ideas and the one with the iframe worked best. However, there is a problem when I try to put two iframes in one page (header and footer). For an unknown reason, only one loads up with the script while the other one remains empty. Is there a way to put two iframes in one page so that both work?

Willy Duitt · 10-05-2004, 10:19 PM

You would need to use unique iframe names... not the same one...

.....Willy

tomzl · 10-08-2004, 02:27 PM

So this should work?

<body onload="javascript:window.adFrame1.location.href='adScript.html';" onload="javascript:window.adFrame2.location.href='adScript.html';">

and this for the first banner

<iframe name="adFrame1" src="" width="475" height="75" align="center" frameborder="0"></iframe>

and this for the second banner ?

<iframe name="adFrame2" src="" width="475" height="75" align="center" frameborder="0"></iframe>

hemebond · 10-08-2004, 10:44 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>44698</title>
	</head>
	<body>
		<a id="advert" href="http://ads.centraliprom.com/central.bin/adclick?i=ohksa3wj&k=1&s=468x60">
			<noscript>
				<img src="htp://ads.centraliprom.com/central.bin/adimpress?i=ohksa3wj&k=1&s=468x60">
			</noscript>
		</a>
	</body>
	<script type="text/javascript">
		var image = document.createElement('img');
		image.setAttribute('src','htp://ads.centraliprom.com/central.bin/adimpress?i=ohksa3wj&k=1&s=468x60');
		document.getElementById('advert').appendChild(image);
	</script>
</html>