HTML and CSS Reference
In-Depth Information
images[i].src = preloading.arguments[i];
count = i+1;
if(count.toString() === numImages) {
//initialize ad
console.log('adInit');
}
}
}
preloading(
"image1.gif",
"image2.gif",
"image3.gif"
);
</script>
</head>
<body>
</body>
</html>
As you can see, an array object called
images
is being set up. Next, let's create a function called
preloading
that
will get passed a bunch of image assets and will loop through and create new image objects out of them and assign
their source attribute to the file path that's provided in the function. Last, anything else needed, such as an
init
function to kick things off in the ad, can be called when the images are loaded.
In addition to preloading external content, you should also prioritize specific assets to load before others.
Sequencing is mandatory if you're leveraging external JavaScript libraries that your script will rely on. Luckily, you can
leverage two new script tag properties,
Async
and
Defer
, to better assist publishers with this code sequencing.
Defer
scripts are scripts that are dependent on other scripts, such as external libraries. Thus, you should defer on jQuery and
other dependent scripts if you absolutely must need to use them in your mobile campaigns.
â–
Defer
scripts execute just before the
DOMContentLoaded
event.
Note
The ad server's JavaScript ad tag should use the
async
property so that the publisher page loads much more quickly.
Async
is for scripts that execute as soon as they're loaded and require no dependencies on other scripts—they're perfect
for ads tags, social networking widgets, and other third-party content on sites not tied specifically to the site's content. The
real benefits in both of these new attributes are that they don't block the HTML parser, which could block vital UI (user-
interface) elements to a user otherwise. Let's look at Listing 8-2, which outlines the use of the
defer
and
async
attributes.
Listing 8-2.
JavaScript Defer Example
<html>
<head>
<script defer src='jquery.js'></script>
<script defer src='mainSiteScript.js'></script>
<script async src='adTag.js'></script>
</head>
</html>
