How to use jsonp to get javascript based ad calls onto a page, asyncronously

I am trying to use jsonp to solve a page performance problem I've been having. On my site I usually display ads by writing out a script tag like this document.write("<scr" + "ipt src='advendor.com\myad.php'></scr" + "ipt>");. This is all well and good except for the fact that the sites the script tags point to have a nasty habit of being very slow. So when I have a page with 5 ads on it it can hold up my entire pages load time due to blocking from syncronous requests.

So my idea was to make a jsonp call to the ad service which will give me the script tag that needs to be written to the page. The problem there is I get the <script> tag on the page but, the script tag does nothing. Will the script only work if it is written before document.ready?

CLARIFICATION: Currently we have our server side code making calls to an ad serving system so it determines what ad code I get server side(in this a script tag with a "src=" that points to the vendors site, which generates the actual ad and tracking). What I'm trying to do is stop the ad calls from blocking the loading of my content. So I want content first and then all the ads next. Putting the script tags at the bottom of the page is not an acceptable solution because I need to determine where the ads appear on the page. IE, <div id="adOneHere"><script src="vendorssite.com"></script></div>, I can have as many as five of these ad calls on one page. Each has its own images/tracking/etc...

My problem is similar to the one addressed here, except that I need to get the "script" tag from a centralized server from multiple domains, and I need to do the document.write inside a specific dom element, I'm well versed in jQuery if that helps.

Answers


document.write() is very slow and pauses HTML parsing while it is running. You could insert the ads into the DOM on DOM-ready. There is no need to pull the <script>-tag via JSONP. Add a small script right before the closing </body>-tag that adds these <script>-tags to the page where needed.


Try using jQuery's getScript, inside a $(document).ready function so it loads the ads after the rest of the page is shown.

(I don't know if this works with those ad scripts...)


Try and use JQuery getScript inline, exactly where the document.write is. This is asynchronous, and doesn't need to be used in conjunction with $(document).ready().

<script>$.getScript("advendor.com\myad.php");</script>

There is detailed discussion here: jQuery: Can't append element on other ways to achieve this and the behaviour of JQuery when trying to do this other ways.


Turns out this is what I needed(link text). If you need to load script tags that load and execute code after the page load event this is the way to go.


Need Your Help

Is it better to use guards than patterns for recursion functions in Haskell?

layout haskell recursion pattern-matching guard

I'm just wondering about a recursion function I'm laying out in Haskell. Is it generally better to use guards than patterns for recursion functions?

How do I get alerted in javascript that an image's dimensions are available?

javascript javascript-events onload image-loading

I need to be able to wait to start a function until the height and width of an image are available. When this code calls start(), it still says the height and width are zero:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.