Jump to content
Search Community

iab's Initial Load and Subload

FrontDev test
Moderator Tag

Recommended Posts

Hello everyone, I am new here. 🙂
Can anyone here help me with the implementation of the iab inital load / subload?
The publisher rejects the banners because they are too heavy. (Initial Load: max. 200 KB, Subload: max. 300 KB). 
How can I implement this initial load in my existing banner script the easiest.
 
Thank you already for your support.
 
function init() {
	TweenMax.to(banner, .5, {display: "block"});
	initAnimation();
}
function byID(a){
	return document.getElementById(a);
}
function initAnimation() {
	tl = new TimelineMax({repeat:-1, paused:true});
	tl.set(['#txt1','#txt1_1'], {opacity:0}, 0);
	tl.add([
		TweenMax.to('#txt1', .6, {opacity:1,delay:.2}),
		TweenMax.to('#txt1_1', .6, {opacity:1,delay:.5}),
   		],"+=.5");
   	tl.call(cnc, null, this, "+=0");
   	tl.add([
		TweenMax.to('#txt1', .6, {opacity:0}),
		TweenMax.to('#txt1_1', .6, {opacity:0}),
   		],"+=5");
	tl.play();
	//console.log(tl.duration());
}
function cnc() {
	cnt--;
	tl.pause();
	if(cnt > 0)	{
		tl.resume();
	}else{
		TweenMax.killAll();
	}
}
var banner = byID('banner'),
	cta_wrapper = byID('cta_wrapper'),
	cnt = 2,
	tl,
	b = {a:0};

window.onload = init;

 

Link to comment
Share on other sites

Thank you @ZachSaucier 🤙
Yes that is an old example from an older banner set.
But I will definitely look at the new GSAP3 and use it in the future when the stuff around it is much lighter in weight.


I just need a solution to reload parts of the banner.
Initial file load: Includes all assets and files necessary for completing first visual display of the ad and requested before load event dispatched by the window object.

Link to comment
Share on other sites

Initial load: Generally means anything loaded up in the HEAD tag (CSS or JS files, etc), your HTML code in the BODY and images there, etc. Stuff that gets loaded immediately BEFORE the page displays / before the Window load event.

Subload: Would be anything that gets loaded after that / AFTER the Window load event. So if you call a JS file at the end of the bottom of your HTML, and those subsequently load in image files  – that's being subloaded in. When you hear subload load or "polite" load, the idea is that sites don't want there to be a hang up for stuff to appear for the user (after all, the user is visiting the webpage to see the site's content, not your banner ad :) So you have an initial load which is smaller in file size as to not slow up everything else on the webpage that's being loaded in (i.e. the website's actual content). Once the site's content gets loaded and gets priority loading, then you load in the heavier ad assets – hence the term "polite".

The code you supplied doesn't really mean much to the initial/subload spec, that's just for starting the animation once stuff is loaded and the actual animation code. It's WHERE and HOW you're adding in those assets to the webpage that pertains to initial/subload, which can be either in HTML, CSS, or JS. So, for example, you could create HTML tag placeholders for your content  (DIV's, buttons, etc), and then on page load, load a file that fills those tags with actual content and does stuff to it (load in images, animation code, etc) –– that would be considered subloading content. If all of your imagery is being added using DIV tags and CSS backgrounds via a CSS file loaded in the HEAD tag, as an example, or you're linking to images using an IMG tag, then all that stuff is being included in the INITIAL load. One alternative to that would be to load in those image assets via JavaScript when the window load event gets fired, and then adding them into their appropriate HTML containers once they've downloaded.

To maximize file size spec and utilize all 500k that you can get (if you REALLY need all that file size), might be to load some images into that initial 200k within the initial load and then hide them until you are ready to use them. Then just load all the other assets into the subload @300kb (with via CSS or JS). Then once those are loaded start playing things back.
 

  • Like 3
Link to comment
Share on other sites

Hi @FrontDev

 

Once you've made your modifications, you can test the initial load and host-initiated subload using automated scanning tools. Here's an example of an ad that loaded 7.5 MB of data in total (with a video):

 

https://www.creativeqa.io/html5-ad-validator/3126e-8312a-b23af

 

Edit: you can now use APIs to automate and scale the ad validation process:

https://www.advalify.io/html5-ad-validator

 

 

advalify-ui-example.png

  • Like 1
Link to comment
Share on other sites

This is my solution.

I'll load (subload) the css file later and therefore also the images.
Only the HTML and JS Files are initial Load.

<script>
    const csshref = "./css/style.css";

    document.addEventListener("DOMContentLoaded", function(event) {
        window.setTimeout(function() {
            const headElement = document.getElementsByTagName('head')[0];
            const cssElement = document.createElement('link');
            cssElement.rel = 'stylesheet';
            cssElement.href = csshref;
            headElement.appendChild(cssElement);

        }, 1000 /* 1 second delay */ );

    });
    </script>

I also switched to GSAP3 and replaced the TweenMax. The only problem I have now is the loop. 
How do I adapt TweenMax.killAll(); to GSAP3?

function byID(a){
	return document.getElementById(a);
}
function initAnimation() {
	tl = gsap.timeline({repeat:-1, paused:true});
	tl.set('#banner', {display: "block"}, 0);
	tl.set(['#txt1','#txt2'], {backgroundPosition:'0px 0px', opacity:0}, 0);
	
	tl.add([
		gsap.to('#txt1',{duration:.6, backgroundPosition:'0px 0px', opacity:1,delay:.2}),
		gsap.to('#txt2',{duration:.6, backgroundPosition:'0px 0px', opacity:1,delay:.5}),
   		],"+=1");
   		
   	tl.call(cnc, null, this, "+=0");
   	
   	tl.add([
		gsap.to('#txt1',{duration:.5, opacity:0}),
		gsap.to('#txt2',{duration:.5, opacity:0}),
   		],"+=5");
	
	tl.play();
	//console.log(tl.duration());
}
function cnc() {
	cnt--;
	tl.pause();
	if(cnt > 0)	{
		tl.resume();
	}else{
		gsap.killTweensOf();
	}
}
var ad = byID('#banner'),
	cta_wrapper = byID('cta_wrapper'),
	cnt = 2,
	tl,
	b = {a:0};;

window.onload = initAnimation;


 

Link to comment
Share on other sites

There is a helper function for killing all tweens that are animating all child elements of any parent element you specify. Ideally all your banner assets would be wrapped in some sort of container div that you would pass into that method like killChildTweensOf("#banner")

 

I'm curious if you really have to kill all the tweens. From the code you provided I would think just pausing the timeline would suffice.

If you have loose tweens (not in a timeline) running you can also just pause the global timeline with gsap.globalTimeline.pause(). This will pause every tween and delayedCall(). 

 

---

@davi great explanation of polite loading. Thanks for taking the time to write all that out.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...