Lazy loading is one more way for publishers to optimize their websites. Rather than immediately loading all ads on a page when it's opened, a publisher can build triggers into the code that prevent ads from loading until a certain condition is met (for example, when a user scrolls to a specific part of the page).
Note: The method described in this article does not include a mechanism for measuring scroll positions or other on-page events to trigger lazy loading. These instructions only cover the actions that you should take to implement a lazy-loaded ad unit.
Implement lazy loading on initial page load
- Change the class on the tags from the Sortable system from "ad-tag" to "no-ad" to turn them into placeholder div tags.
- To make it easier to find the correct div later, you may want to add a unique id to the class name, for example, "no-ad-1".
- Add the placeholder divs for the ads in the location you would like the ads to appear.
Example
A publisher can take a regular looking div and change it so it won't be found.
- Regular div:
<div class="ad-tag" data-ad-name="Sortable Mobile Box" data-ad-size="300x250" ></div>
- Lazy load div:
<div class="no-ad-1" data-ad-name="Sortable Mobile Box" data-ad-size="300x250" ></div>
Implement lazy loading on page scroll
Once the user scrolls down to the point where you want to trigger the ad load, change the class from "no-ad-1" to "ad-tag" on the div(s) that you want to load, and then call the deployads.push() function.
Example
- Before user scrolls:
<div class="no-ad-1" data-ad-name="Sortable Mobile Box" data-ad-size="300x250" ></div>
- After user scrolls:
<div class="ad-tag" data-ad-name="Sortable Mobile Box" data-ad-size="300x250" ></div>
To actually trigger the ad to load, execute our push function:
<script>(deployads = window.deployads || []).push({});</script>You can add additional classes and parent elements to assist in the locating and targeting of the ad units.