Expert JavaScript coder needed to make ads ''lazy load'' even after DOM is done rendering

1) We need a general-purpose, pure JavaScript way to lazy-load an ad into a specified div at a AFTER a page has finished loading (i.e. we want to load the ad into a div ***AFTER*** the page and the DOM has rendered). 2) We work with 10 ad networks, so we want this solution to work for all our ad network scripts. We will provide sample scripts from all these networks. 3) Ad must be lazy-loaded and rendered correctly i.e. exactly as it would look if the ad JavaScript was placed in a div. Page must not get overwritten, as it would if we just used [login to view URL] after the DOM has rendered 4) The code must be pure, cross-browser JavaScript: no jQuery, Prototype, etc. It must work on the following browsers: o IE8 o IE7 o IE6 o Firefox 3.X o Safari o Chrome 5) If you use any 3rd party library in your code, only MIT license is acceptable. GPL license is not acceptable. 6) Your code must be well-documented 7) You must supply a separate Word document describing how your code works 8) The resulting library is the sole intellectual property of our company 9) You can use? [[login to view URL]][1]? as an example of one implementation, but do not copy-paste this code ## Deliverables lazy-loading ad script requirements CONFIDENTIAL: Please do not share without prior approval of David Parkinson (david@[login to view URL]) What we're currently doing (and must continue to do): 1. Currently we place the following JavaScript on a customer's web page: ? ? <script language="JavaScript" src="[login to view URL]" type="text/javascript"></script> ? ? <script language="JavaScript" type="text/javascript"> ? ? ? [login to view URL] ? ? ? ? = 10; ? ? ? ESAGlobals.user.website_id = 15; ? ? ? ESAGlobals.user.zone_id ? ? = 15; ? ? ? ESAGlobals.zone.is_preview = false; ? ? ? [login to view URL](true); // change true to false, and ad will be deactivated ? ? </script>? 2. The first <script> tag loads a static script. The second <script> tag sets a few variables and calls the serveAd() function in [login to view URL], which causes the ad code to be fetched from our server (see serveAd function's definition in the [login to view URL] file) and rendered inside a <div>. 3. Notice that the [login to view URL] file contains a slightly modified version of domWrite 4. You can see our product (and this script) in action on [login to view URL] or on [login to view URL] “Must Have?? Requirements: 1. We want to load an ad from various ad networks at an abritrary time when a user visits a page i.e. the DOM may or may not have rendered at the point we load the ad. We call this “lazy loading?? 2. A page can have multiple <div>s. ? Each <div> can be “lazy loaded?? with one ad from an ad network. ? 3. We want to “lazy load?? the ad inside a given <div>. 4. We currently create this <div> before the DOM is finished rendering, so it already exists. 5. “Lazy Loading?? cannot affect the style or layout of the page. 6. No momentary flicker while the ad is “lazy loaded?? 7. Page does not get overwritten 8. Ads that are “lazy loaded?? must look exactly the same as if they were invoked normally on an HTML page (without using domWrite or “lazy loading??) 9. DOM should look exactly the same as the HTML page when ad is loaded (with the exception that we have put the ad inside a <div> we created as specified above) 10. Third party ad scripts should execute in a JavaScript enviornment that is as close as possible to the native JavaScript enviornment (i.e. without domWrite()). ? 11. For example: If a script creates an iFrame and then does a [login to view URL]() to the the <iframe>'s contentDocument, the output of this [login to view URL]() should be placed within the iFrame. ? 12. If it's not possible to meet requirements #3 and #4 a. Ad should not be rendered b. An error flag should be set so our JavaScript code can query to see if domWrite() was successful or not. 13. The code must be pure, cross-browser JavaScript: no jQuery, Prototype, etc. It must work on the following browsers: a. IE8 b. IE7 c. IE6 d. Firefox 3.X e. Safari f. Chrome 14. Must Have Ad Networks (modified code must work with these networks): a. AdBrite b. XtendMedia c. Clicksor d. AdsDaq (ContextWeb) e. Ybrant 15. The updated code should not be shared on the Internet (e.g. on a blog or a forum).? 16. We would like the final solution delivered by 3/26/2010 17. We will separate this project into milestones with dates, deliverables, and a pre-agreed payment when deliverables are delivered. ? Each date we'll have a Skype review a. Week 1: 10AM PST on Friday March 12th? b. Week 2: 10AM PST on Friday March 19th c. Week 3: 10 AM PST on Friday March 26th Nice To Haves (We don't need these but if you can make it work; great): 1. Ideally, the solution should NOT modify the ad JavaScript. 2. Your code should ideally be well-documented with a brief explanation of the design Ad Code 1. AdBrite STATUS: Tested with domWrite, needed many hacks to make it work Sample ad code: Please find sample adBrite code. ? If we accept your bid we’ll give you some sample code. ? Problems we have seen: 1. AdBrite ad script's output in the DOM looks different if we use domWrite, vs. if we just [login to view URL] the script to the page (without lazy loading). The AdBrite ad script does two things: a) creates an iframe b) calls a function which [login to view URL] a <style> node to the document of the iframe the ad script created in step a) Expected result: <style> node is written to the document of the iframe the ad script created in step a) Actual result: <style> node is written to the output div and NOT to the iframe created in step b), because you are delaying the [login to view URL] to be lazy. The result is that the ad script's CSS gets applied to the whole page! How we tried to solve the problem: we hacked a solution where we wait until we think the ad has rendered, and then move nodes into the correct location in the DOM. Generally, we had to do a lot of hacks to get AdBrite to work correctly. 2. [login to view URL] is not overwritten for iframes Consider the sample AdBrite ad script , which creates an iframe and then it calls [login to view URL] on the iframe's document. The problem is this [login to view URL] is the *native code* [login to view URL], because each new iframe created by an ad script gets the native [login to view URL] to start off with.? How we tried to solve the problem: We have to manually overwrite the iframe's [login to view URL] with domWrite. 1. XtendMedia STATUS: Tested with domWrite, works partially Sample ad code #1: <!-- BEGIN STANDARD TAG - 120 x 600 - [login to view URL]: Run-of-site - DO NOT MODIFY --> <SCRIPT TYPE="text/javascript" SRC="[login to view URL]"></SCRIPT> <!-- END TAG --> Sample ad code #2: <!-- BEGIN STANDARD TAG - 468 x 60 - [login to view URL]: Run-of-site - DO NOT MODIFY --> <IFRAME FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=468 HEIGHT=60 SRC="[login to view URL]"></IFRAME> <!-- END TAG --> Problems we have seen: sample ad code #1 works, but sample ad code #2 does not work with domWrite 3. Clicksor STATUS: Currently untested with domWrite Sample ad code: <script type="text/javascript"> //default banner house ad url? clicksor_default_url = ''; clicksor_banner_border = '#99CC33'; clicksor_banner_ad_bg = '#FFFFFF'; clicksor_banner_link_color = '#000000'; clicksor_banner_text_color = '#666666'; clicksor_banner_image_banner = true; clicksor_banner_text_banner = true; clicksor_layer_border_color = ''; clicksor_layer_ad_bg = ''; clicksor_layer_ad_link_color = ''; clicksor_layer_ad_text_color = ''; clicksor_text_link_bg = ''; clicksor_text_link_color = ''; clicksor_enable_text_link = false; </script> <script type="text/javascript" src="[login to view URL]"></script> <noscript><a href="[login to view URL]">online marketing</a></noscript> ? 4. AdsDaq STATUS: Currently untested with domWrite Sample ad code: <script ? src="[login to view URL]"></script> 5. Ybrant STATUS: Currently untested with domWrite Sample ad code #1: <!-- BEGIN STANDARD TAG - 300 x 250 - [login to view URL]: : SECTION CODE REQUIRED - DO NOT MODIFY -->? <SCRIPT TYPE="text/javascript" SRC="[login to view URL]"></SCRIPT>? <!-- END TAG --> Sample ad code #2: <!-- BEGIN STANDARD TAG - 300 x 250 - [login to view URL]: : SECTION CODE REQUIRED - DO NOT MODIFY -->? <SCRIPT TYPE="text/javascript" SRC="[login to view URL]"></SCRIPT>? <!-- END TAG --> Sample ad code #3: <!-- BEGIN STANDARD TAG - 300 x 250 - [login to view URL]: : SECTION CODE REQUIRED - DO NOT MODIFY -->? <SCRIPT TYPE="text/javascript" SRC="[login to view URL]"></SCRIPT>? <!-- END TAG --> ----------------------------------------------- Finally: Please complete the following in your bed: 1) Please have the first word in your response to be "ELITE", this way we know you read all the requirements 2) Please tell us a high level description of how you'd do this? 3) Please tell us a few problems with [login to view URL]() 4) Please point us to any places where you've done similar things in the past.