SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code:
    <!--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:

    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

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,245
    Mentioned
    156 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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>

  3. #3
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,245
    Mentioned
    156 Post(s)
    Tagged
    0 Thread(s)
    How about trying something like this:
    Code:
    <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>

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,904
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    @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.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  6. #6
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,245
    Mentioned
    156 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <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
    Code:
    <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>

  8. #8
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,245
    Mentioned
    156 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <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.

  9. #9
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,904
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    @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.
    HTML Code:
    <!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> 
    Last edited by John_Betong; May 10, 2012 at 06:21. Reason: added missing closing comment bracket. added img_dims class
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  10. #10
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John_Betong, how does that actually work? Does it speed up the page load by deferring the running of my advert javascript?

  11. #11
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,904
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    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:

    http://tools.pingdom.com/fpt/

    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.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  12. #12
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This would be a typical page: http://www.access-programmers.co.uk/...d.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.

  13. #13
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,904
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Jon Lawrance View Post
    This would be a typical page: http://www.access-programmers.co.uk/...d.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:

    Code:
     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":
    http://www.askapache.com/htaccess/ap...ubdomains.html

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

      <?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.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  14. #14
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,904
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Jon Lawrance View Post
    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.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •