Delayed loading of code

I have some ads on my website that slow its loading. Someone gave me some code to delay the loading so that it puts a placeholder in place, loads the page and then substitutes that placeholder with the correct javascript ad.

Firstly, I am using this code in place of where my advert was:

<!--CW replacement-->
<div style="width:300px; height:250px; background-color: #F2F2F2;">
<div id="load_top1"></div>
</div>

Then, right at the end of the footer after my Google Analytics tag, I am using this code:

<!--Load CW ad-->

<div id="load_top_footer" style="display: none;">
<script  src="http://tag.contextweb.com/TagPublish/getjs.aspx?action=VIEWAD&cwrun=200&cwadformat=300X250&cwpid=521268&cwwidth=300&cwheight=250&cwpnet=1&cwtagid=100009"></script>
</ div>
<script type="text/javascript">
window.onload = function () {
document.getElementById ('load_top1'). appendChild (document.getElementById ('load_top_footer'));
document.getElementById ('load_top_footer'). style.display ='';
}

When I load my webpage, I can see the 300x250 placeholder there, but the advert never shows. Have I put my code in the wrong area or something? Or is the code wrong? Any alternative solution to achieve my goal?

Thanks,

Jon

I believe what you are attempting to do should work, however, are you sure you have your advertiser URL correct? When I load the page and I commented out your custom onload event, I still end up with a blank page.

I’d check your script tag for your advertiser, as I think your URL is incorrect, as it returns a broken image (image not found).

As a proof-of-concept, I used the Sitepoint logo to prove your code should work:

<html>
	<head>
	</head>
	<body>
		<!--CW replacement-->
		<div style="width:300px; height:250px; background-color: #F2F2F2;">
			<div id="load_top1"></div>
		</div>
		
		<!--Load CW ad-->

		<div id="load_top_footer" style="display:none">
			<img src="http://www.sitepoint.com/forums/images/sitepoint/misc/logo.png" />
		</div>
		<script type="text/javascript">
			window.onload = function () {
				document.getElementById('load_top1').appendChild(document.getElementById('load_top_footer'));
				document.getElementById('load_top_footer').style.display ='';
			}
		</script>
	</body>
</html>

Yes, the url is correct. When I copy and paste the same advert code to its usual location it works fine. Its only when I try to do the delayed posting that it fails.

How about trying something like this:

<html>
	<head>
	</head>
	<body>
		<!--CW replacement-->
		<div style="width:300px; height:250px; background-color: #F2F2F2;">
			<div id="load_top1"></div>
		</div>
		<script type="text/javascript">
			window.onload = function () {
				var adScript = document.createElement("script");
				adScript.setAttribute('src', 'http://tag.contextweb.com/TagPublish/getjs.aspx?action=VIEWAD&cwrun=200&cwadformat=300X250&cwpid=521268&cwwidth=300&cwheight=250&cwpnet=1&cwtagid=100009');
				document.getElementById('load_top1').appendChild(adScript);
			}
		</script>
	</body>
</html>

@Jon Lawrance

I have tried numerous methods to make my sites load just that little bit more faster.

As far as adverts and images are concerned then I read somewhere that storing and including the files on a subdomain of your main site has the effect that the files are queued. This results in the page is displayed and the included subdomain images, javasript files, etc fill in the blanks.

Google on something like “subdomain page speed faster” and see what you can find.

display none actually would load the content, it would just hide it. which means it wont help with the load time.

to be able to load after some time you can put the ads in a seperate file and then use the jquery load function with a combination of settimeout javascript method

<div id=“adv”>
</div>

<script>
var t;
$(window).load(function () {

t=setTimeout(loadAd,3000);

});

function loadAd()
{
//use jquery load function here
clearTimeout(t);
}
</script>

this will need some tweaking.

Okay, here is my latest attempt, but I still can’t get it to work with your advertisement script (works for loading static content though, such as the sitepoint image).

MainPage.html

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		<!--CW replacement-->
		<div style="width:300px; height:250px; background-color: #F2F2F2;">
			<div id="load_top1"></div>
		</div>
		<script type="text/javascript">
			window.onload = function () {
				$.ajax('DelayAd.html',
					{
						dataType: 'html',
						success: function(data, textStatus, jqXHR)
						{
							alert(data);
							document.getElementById('load_top1').innerHTML = data;
						}
					}
				);
			}
		</script>
	</body>
</html>

DelayAd.html

<div id="load_top_footer">
<script type="text/javascript" src="http://tag.contextweb.com/TagPublish/getjs.aspx?action=VIEWAD&cwrun=200&cwadformat=300X250&cwpid=521268&cwwidth=300&cwheight=250&cwpnet=1&cwtagid=100009"></script>
</div>

Okay, I am getting closer. I can now see the ad scripts being downloaded in the Network section of the Chrome development tools.

Here is the updated MainPage.html

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		<!--CW replacement-->
		<div style="width:300px; height:250px; background-color: #F2F2F2;">
			<div id="load_top1"></div>
		</div>
		<script type="text/javascript">
			window.onload = function () {
				$.ajax('DelayAd.html',
					{
						dataType: 'html',
						success: function(data, textStatus, jqXHR)
						{
							$('#load_top1').html(data);
							var dom = $(data);

							dom.filter('script').each(function(){
								if(this.src) {
									var script = document.createElement('script'), i, attrName, attrValue, attrs = this.attributes;
									for(i = 0; i < attrs.length; i++) {
										attrName = attrs[i].name;
										attrValue = attrs[i].value;
										script[attrName] = attrValue;
									}
									document.getElementById('load_top_footer').appendChild(script);
								} else {
									$.globalEval(this.text || this.textContent || this.innerHTML || '');
								}
							});
						}
					}
				);
			}
		</script>
	</body>
</html>

I still can’t see an advertisement though. But there could be some host validation that is happening so it isn’t serving it up.

@Jon Lawrance

Try inserting this script into your files.

After the page has loaded and displayed the image should appear.

Works on Localhost as well:

Adjust the width and height to suit.


<!doctype html>
<head>
<title>Test Position:absolute</title>
<style type=''text/css' >
  .img_dims {width:28px; height:21px}  /*   filesize: 180 KB -  280x210px */
</style>
</head>

<body style="position:relative">

  <!-- PLACE HOLDER -->
  <div class='img_dims' style="float:left; background-color:#090">
    <!--
        This is the dimensioned place holder for the image
        which is called just before </body>
        with position:absolute;
    -->
  </div>
  ...
  ...
  ...
  ...
  ...
  <div class='img_dims'  style="position:absolute; top:20px; background-color:#0ff">
    <img
        src='http://subdomain.johns-jokes.com/thumb/parrotchute.gif'
        class='img_dims'  alt='#'
      />
  </div>

</body>
</html>

John_Betong, how does that actually work? Does it speed up the page load by deferring the running of my advert javascript?

I think the page appears to load quicker because the page outline is displayed then the blanks are filled. Also the sub-domains utilise the browsers ability to load additional files in parallel.

Did you try the code and also test the loading times using the following:

There are numerous articles concerning decreasing load times. Most important is to establish the major problem which is causing the page to load slowly.

Can you supply a link to the problem pages.

I use Google Adsense and have managed to display the page first before the advert is loaded.

This would be a typical page: http://www.access-programmers.co.uk/forums/showthread.php?t=225807

I wouldn’t want to alter the adsense loading but the other third party ads, like ContextWeb.

Yes, I’ve used pingdom and other tools but the thing is the adverts. That is the delay.

I haven’t tried the code yet as I wanted to see if it is supposed to delay loading of javascript first.

If ContexWeb is the main culprit that is making the page load very slow then I would be tempted to not load the page the first time a punter arrives at the site but to load ContexWeb on all subsequent pages:


 test for a  $_SESSION['counter'] variable
 if  $_SESSION['counter'] does not exist 
 then 
     $_SESSION['counter'] to TRUE
 else
     load the ContextWeb advert script 

I would also be tempted to load the ContextWeb from a subdomain which should load the script in parallel. As far as I understand loading all scripts and images from subdomains is beneficial until a certain threshold is reached (about a dozen scripts/images) and then the load times have a negative effect.

Google “Apache subdomain page speed”:

Try the following script and monitor the loading time with and without the script loaded:



  <?php 
     # toggle TRUE and FALSE 
     if ( TRUE )
     { 
         include 'http://subdomain/adverts/ContextWeb-001.js'; 
     }
     ?>


>>> I haven’t tried the code yet as I wanted to see if it is supposed to delay loading of javascript first.
The script I supplied will only work on a small page where a fixed position can be applied to the page.

I am already using a cdn for images and other bits. Does that make any difference to the subdomain thing as I’m wondering if the browser is already therefore using one of the pipes.

I think my host is relatively slow and read about speeding up page loading by storing the CSS, Javascript, adverts, images files on a subdomain to take advantage of the parallel loading.

I also use a CDN and page caching, check my signature for links to see if the page loads and displays an outline with text content before loading the thumbnails and Google Adverts. Does the site seem fast or slow? Also check the source files of the thumbnails.

I noticed your site is rather complex. I would be tempted to save one of the slow loading page contents to a static file and then to try and optimise the load time for the static page. Also monitor and log each optimisation.