Banner chains / page slowdown

Hi there,

Got a problem which I investigated for a long time before I came here
;-)

Look - I got a webpage with huge amount of visits, and I need to put
some banners (got from diffrent servers) on it without slowing down page
rendering.

- You could say "the best solution would be to put banners code
(actually a JS code) into an IFRAME" - sure, but I can't do that while I
can present Google's AdSense ads there too (hint: googles robot won't
index my real page, but a page inside the Iframe - so ads won't be well
targeted..)

- You could say "just put JS <script> tag with src attribute pointed to
your adServer" - fine, but the point is that my AdServer retrieves data
from other servers - I'll explain:
1. MyAdServer asks outer server to send an Ad for him,
2. if he can give him Ad - it's ok, otherwise, MyAdServer asks another
server for an Ad
3. if he can give him an Ad - fine, otherwise MyAdServer gets an Ad from
Google's AdSense
The problem is in the 'banner chain' - the page will stop rendering
unless MyAdServer displays an Ad (and it can take some time in some very
pessimistic circumstances)



The idea (besides those which I've already thrown away ;-) ) was to
create hidden layers (e.g. with "display: none" style) at the bottom of
the web page (just before </BODY> tag).

Lets say we'd like to put a banner on the page. We'd need to place an
empty layer for such banner (as a container) and sets its "id"
attribute. Than, on the very bottom of the page we'd put some Javascript
code which loads a banner. For example:

<!- --file.html ---------------------------------- -->
(...)
<div id="some_container_id">This is container for banner</div>
(...)
<script type="text/javascript">
var _containerID = 'some_container_id'; // declare containers ID
</script>
<script type="text/javascript" src="ourAdServerScript.js"></script>
</body>
</html>
<!-- ------------------------------------------------>


The script named "ourAdServerScript.js" could be placed directly on our
AdServer and could probably look like this:

//-- ourAdServerScript.js ----------------------------
(...)
document.write('<DIV id="'+_containerID+'_hidden'" style="display:
none;">');
document.write('<SCR'+'IPT type="text/javascript"
src="advertiser.js"></SCRIPT>'); // this one loads some banner content
(outputs it via document.write)
document.write('</DIV>');

// this way we'd have the DIV filled with some banner content

window.onload = function() {
var hiddenEl = document.getElementById(_containerID+'_hidden');
var banner_code =hiddenEl.innerHTML;
var bannerEl = document.getElementById(_containerID);
bannerEl.innerHTML = banner_code;
hiddenEl.innerHTML = '';

};
(...)
//----------------------------------------------------


Lets say "advertiser.js" code looks like this:

//-- advertiser.js -----------------------------------
(...)
document.write('<img src="http://some/path/banner.gif"');
//----------------------------------------------------

This way we could close javascripts output in hidden layer and move it
on load event into the right place. The reason why we put it in the
bottom is that we don't care how long will it take to load a banner as
we got a whole page rendered (the banner loading process won't stop
rendering the page even if there's a problem with adServer connection
etc.).
Unfortunately, while in Firefox (and other Gecko browsers), and even in
Opera - everything's working just perfect, the problem appears when we'd
like to use one of MS browsers (tested on IE6, IE7).
Using the code I've prepared - it should be displayed this way: ("pseudo
code")


(...)
<div id="some_container_hidden">
{ banner content produced using some outer script.. }
</div>
</body>
</html>


so we'd be able to move such layer's content into banner container.

But, the Internet Explorer gives us it this way:

(...)
<div id="some_container_hidden">
</div>
{ banner content produced using some outer script.. }
</body>
</html>


and we're unable to move produced banner code to any place.

I have even checked what happened if we create such DIV using DOM
functions, but result was still the same.



If you could give me any clue/hint how to solve it I would appreciate
:-)

Best regards,
nez

nez wrote:

Hi there,

Got a problem which I investigated for a long time before I came here
;-)

Look - I got a webpage with huge amount of visits, and I need to put
some banners (got from diffrent servers) on it without slowing down page
rendering.

- You could say "the best solution would be to put banners code
(actually a JS code) into an IFRAME" - sure, but I can't do that while I
can present Google's AdSense ads there too (hint: googles robot won't
index my real page, but a page inside the Iframe - so ads won't be well
targeted..)

- You could say "just put JS <script> tag with src attribute pointed to
your adServer" - fine, but the point is that my AdServer retrieves data
from other servers - I'll explain:
1. MyAdServer asks outer server to send an Ad for him,
2. if he can give him Ad - it's ok, otherwise, MyAdServer asks another
server for an Ad
3. if he can give him an Ad - fine, otherwise MyAdServer gets an Ad from
Google's AdSense
The problem is in the 'banner chain' - the page will stop rendering
unless MyAdServer displays an Ad (and it can take some time in some very
pessimistic circumstances)



The idea (besides those which I've already thrown away ;-) ) was to
create hidden layers (e.g. with "display: none" style) at the bottom of
the web page (just before </BODY> tag).

Lets say we'd like to put a banner on the page. We'd need to place an
empty layer for such banner (as a container) and sets its "id"
attribute. Than, on the very bottom of the page we'd put some Javascript
code which loads a banner. For example:

!- --file.html ---------------------------------- --
(...)
div id="some_container_id">This is container for banner</div
(...)
script type="text/javascript"
var _containerID = 'some_container_id'; // declare containers ID
/script
script type="text/javascript" src="ourAdServerScript.js"></script
/body
/html
!-- ------------------------------------------------


The script named "ourAdServerScript.js" could be placed directly on our
AdServer and could probably look like this:

//-- ourAdServerScript.js ----------------------------
(...)
document.write('<DIV id="'+_containerID+'_hidden'" style="display:
none;">');
document.write('<SCR'+'IPT type="text/javascript"
src="advertiser.js"></SCRIPT>'); // this one loads some banner content
(outputs it via document.write)
document.write('</DIV>');

// this way we'd have the DIV filled with some banner content

window.onload = function() {
var hiddenEl = document.getElementById(_containerID+'_hidden');
var banner_code =hiddenEl.innerHTML;
var bannerEl = document.getElementById(_containerID);
bannerEl.innerHTML = banner_code;
hiddenEl.innerHTML = '';

};
(...)
//----------------------------------------------------


Lets say "advertiser.js" code looks like this:

//-- advertiser.js -----------------------------------
(...)
document.write('<img src="http://some/path/banner.gif"');
//----------------------------------------------------

This way we could close javascripts output in hidden layer and move it
on load event into the right place. The reason why we put it in the
bottom is that we don't care how long will it take to load a banner as
we got a whole page rendered (the banner loading process won't stop
rendering the page even if there's a problem with adServer connection
etc.).
Unfortunately, while in Firefox (and other Gecko browsers), and even in
Opera - everything's working just perfect, the problem appears when we'd
like to use one of MS browsers (tested on IE6, IE7).
Using the code I've prepared - it should be displayed this way: ("pseudo
code")


(...)
div id="some_container_hidden"
{ banner content produced using some outer script.. }
/div
/body
/html


so we'd be able to move such layer's content into banner container.

But, the Internet Explorer gives us it this way:

(...)
div id="some_container_hidden"
/div
{ banner content produced using some outer script.. }
/body
/html


and we're unable to move produced banner code to any place.

I have even checked what happened if we create such DIV using DOM
functions, but result was still the same.



If you could give me any clue/hint how to solve it I would appreciate
:-)

Best regards,
nez

Hi Nez,

What about using the good old forgotten lowsource for the image?
<img src="http//www.example.com/IAmSlow.gif"
lowsrc="http://www.yourownserver.com/smalimage.gif">

That way the page renders quickly, and when the slow stuff comes in after a
minute or 2, it will be rerendered.

Could that help?

Regards,
Erwin Moller