Javascript polite loading help

[brucekean]

Hi everyone,

 

I'm new to creating banner ads and have trouble understanding how to do 'polite loading' with javascript. I've googled how to do it but everything that comes up is related to specific platforms like Double Click and libraries like Enabler.

 

Can anyone explain how to polite load for example a jpg before loading in heavy assets? Any information would be really appreciated.

 

Thank you

[Thomas James Thorstensson]

Hello fellow Greensocker.

 

I recommend asking this question on StackOverflow as well. But here is a simple way of doing it. Note that setting an the source of the Image object kicks things off.

 

Also, if you are doing banners you might run into DoubleClick. Albeit their default template code speaks of loading the Enabler does not preload images. So even if you are doing doubleclick banners: if you need to preload images you can bake the code below into the default logic of any doubleclick template javascript file. 

 

There are also other ways to preload, see stackoverflow.

var imagePreloadCount = 0,
    imagesToPreload = [
        'image.jpg',
        'anotherimage.png'
    ];




function preloadImages() {
    for (var i = 0; i < imagesToPreload.length; i++) {
        var thisImage = new Image();
        thisImage.src = imagesToPreload[i];
        thisImage.onLoad = imageLoaded();
    }
}



function imageLoaded() {
    imagePreloadCount += 1;
    if (imagePreloadCount == imagesToPreload.length) {
        startMyAnimation()
    }
}

    preloadImages();

Thanks,

 

".Snoop"

[davi]

Use window.onLoad or readyState event. On ready, load in scripts n' styles, preload yer images, and then start the banner up.

Code would be something like this (I may have errors, sorry haven't checked it)

window.onload = function (){
    loadScript("myJavaScript.js", "js");
    loadScript("myCSS.css", "css");
};

function loadScript(filename, filetype){
    if (filetype == "js"){
        var fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
    }
    else if (filetype == "css"){ 
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    };
    if (typeof fileref != "undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref);
    };
};


///and then preloading yer images, this code 
//being in the JS file being referenced above ....

var imageArray = [
    "images/image1.svg",
    "images/image2.png",
    "images/image3.jpg",
];
preloadImages(imageArray, start);

function preloadImages(imgArray, callbackFunction) {
    var totalImages  = imgArray.length,
        loadedImages = 0,
        img          = null,
        i;
    for (i = 0; i < totalImages; i++) {
        img = document.createElement("img");
        img.src = imgArray[i];
        img.onload = function () {
            loadedImages++;
            if (loadedImages === totalImages) callbackFunction();
        };
    }
};

start = function() {
    //start the banner
}

[ohem]

Hi everyone,

 

I'm new to creating banner ads and have trouble understanding how to do 'polite loading' with javascript. I've googled how to do it but everything that comes up is related to specific platforms like Double Click and libraries like Enabler.

 

Can anyone explain how to polite load for example a jpg before loading in heavy assets? Any information would be really appreciated.

 

Thank you

Do you know what ad serving company the ads will be trafficked through?  A lot of platforms have their own way of handling polite loading.  

 

For example, with DCM or Sizmek a backup image/pre-loader image can easily be uploaded for each banner to show while the page is loading.

[brucekean]

Thanks for the help guys. I'll have a play around with these today

 

And Ohem, not sure what company the client is using but have requested more info. Really new to all of this so hadn't thought to ask. Thanks for the suggestion

[Christoph Erdmann]

Hi,

I am a little bit confused why those two snippets are "polite loading". The window.onload and DOMContentReady events refer to the ads iframe not to the parent window. So it is not sure if the parent window is completely loaded.

So there have to be communication between the parent window and the ad iframe to be sure. Seems to be the reason why Doubleclick calls a custom event:

https://support.google.com/richmedia/answer/2672514

 

And I've read here in the forums that this is not possible in DCM. But this is a help page for DCM, isn't it?

Could someone enlighten me, please? This industry is so damn confusing...

[ohem]

Hi,

I am a little bit confused why those two snippets are "polite loading". The window.onload and DOMContentReady events refer to the ads iframe not to the parent window. So it is not sure if the parent window is completely loaded.

So there have to be communication between the parent window and the ad iframe to be sure. Seems to be the reason why Doubleclick calls a custom event:

https://support.google.com/richmedia/answer/2672514

 

And I've read here in the forums that this is not possible in DCM. But this is a help page for DCM, isn't it?

Could someone enlighten me, please? This industry is so damn confusing...

That's a help page for DoubleClick Rich Media.

 

With DCM, you don't need to do anything special in your HTML or JS file to add a polite load.  A polite load image can be uploaded/specified during trafficking, and DCM will display it until the parent window is fully loaded.

 

https://support.google.com/richmedia/answer/6279526?hl=en

Polite load file

Upload a polite load image so that you have something to show if there are delays loading your primary HTML5 asset in a browser.

When your creative is delivered, the polite load asset loads first before each impression, followed by your primary asset. This way, if the user's browser experiences a delay loading your primary asset, the polite load image will be there until everything else finishes loading. We recommend that your polite load asset matches the first frame of your asset so users don’t experience any interruption between the two assets loading.

• File type: Add an image file that is under 40 KB. It can be the same asset as your backup image. If you upload multiple image files, choose the one you want in the Polite load file menu.

• Dimensions: The polite load image dimensions should match your backup image dimensions. (This means they will also match any non-flexible HTML5 dimensions.)

[Christoph Erdmann]

Hi, ah, ok, I asked for "polite loading" because I was hoping to get more space. So with DCM there isn't.

 

And to the first paragraph: So it is correct that the snippets above are NOT "polite loading"?

[joe_midi]

Yes and no.

 

Yes, in the sense that the images and scripts and indeed polite loaded with respects to your own Ad and its iFrame. This is beneficial because it ensures that all our creative assets are available to be rendered rather than some half-loaded and having empty div's being animated on screen.

 

No, in that it doesn't necessarily wait for the publisher's page to finish loaded before loading your ad.

 

I assume your definition of "Polite Loading" comes from the ye-olde-Flash era, which heavily relied on platform specific code to make happen, which would block loading of ads specifically until after a page and loaded.

[Christoph Erdmann]

Yes, in the sense that the images and scripts and indeed polite loaded with respects to your own Ad and its iFrame. This is beneficial because it ensures that all our creative assets are available to be rendered rather than some half-loaded and having empty div's being animated on screen.

 

This is "preloading" not "polite loading", isn't it? Don't know what should be polite if you preload your assets.

 

 

I assume your definition of "Polite Loading" comes from the ye-olde-Flash era, which heavily relied on platform specific code to make happen, which would block loading of ads specifically until after a page and loaded.

 

 

 

I've read it here:

http://support.adform.com/documentation/build-html5-banners/html5-banner-formats/polite-load-ad/ (see "Polite banner from one file")

and

https://support.google.com/richmedia/answer/2672514?hl=en (see "Set up polite loading with JavaScript")

 

Both are using custom events. And DoubleClick allows 200kb instantly loaded and additionally 300kb politely loaded as recommended by the IAB:

https://www.iab.com/guidelines/rich-media-guidance/

 

I still have the feeling not to understand a litte thing...

[ohem]

 

Both are using custom events. And DoubleClick allows 200kb instantly loaded and additionally 300kb politely loaded as recommended by the IAB:

https://www.iab.com/guidelines/rich-media-guidance/

 

That's for DoubleClick Rich Media, not DCM (DoubleClick Campaign Manager).  DCM is for standard banners only, and has a hard file size limit of 200k.

 

Seems like you already have the information you need for how to set up polite loading (not just pre-loading) for either DoubleClick Rich Media (using the enabler) or DCM.

 

This thread was originally asking about polite loading not specific to any platform, which is why the initial answers didn't have a way to communicate with the parent window when an ad is live, since that ability would be dependent on the ad platform used.

[ohem]

Edit: see my other post above. 

[Christoph Erdmann]

Thanks, now I am enlightened

[somnamblst]

Just a quick note on what makes a banner rich in Doubleclick post Flash days rules. Expandable, video, dynamic, or anything that would not be considered in page, like a Lightbox ad (floating).

[emmanuelulloa]

The easiest way for me to do polite load/lazy load is "activate" the html until the window.onload event is triggered"

<div id="banner"></div>
<script id="template" type="text/template">
  <h1>Look at this promo</h1>
  <img src="bigImage.png" />
  <img src="anotherImage.jpg" />
  <div class="cta">BUY NOW!</div>
</script>
<script type="text/javascript">
window.onload = function(){
		var banner = document.getElementById('banner');
		banner.innerHTML = document.getElementById("template").innerHTML;
  		//BANNER ANIMATION STARTS HERE
}
</script>