The following client-side APIs are designed to wait for different types of elements to load on a page before executing a function or returning a promise.
Wait for CSS Element
Wait for an element on the page to load and then execute a function.
Syntax
DYO.waitForElement (selector, callback, minElements, interval, maximumRetries)
Parameters:
- selector: valid css selector identifying the DOM elements to look for
- callback: function to execute
- minElements (optional, default: 1): minimum number of selected resources rendered before executing the function
- interval (optional, default: 100): how often the page will be rechecked for the elements (in milliseconds)
- maximumRetries (optional, default: Infinity): maximum number of rechecking the page for the elements before giving up
Return:
None
Examples:
//execute an alert on the page after the main page div (#main) was loaded; check every 100 milliseconds for 10 times.
DYO.waitForElement('#main', function() {
alert('done')
}, 1, 100, 10)
// execute only after 6 article elements were loaded
DYO.waitForElement('.article', function() {
alert('articles loaded')
}, 6)
Wait for CSS Element Asynchronously
Wait for an element on the page to load and then returns a promise.
Syntax
DYO.waitForElementAsync (selector, minElements, interval, maximumRetries)
Parameters:
- selector: valid css selector identifying the DOM elements to look for
- minElements (optional, default: 1): minimum number of selected resources rendered before executing the function
- interval (optional, default: 100): how often the page will be rechecked for the elements (in milliseconds)
- maximumRetries (optional, default: Infinity): maximum number of rechecking the page for the elements before giving up
Return:
None
Examples:
//Checks if selector is on the page, then returns the number of elements in the cart
DYO.Q(DYO.waitForElementAsync("<selector>", 1, 10, 100)).then(function(elements) {
return parseInt(elements[0].textContent);
});
//Returns true if selector is on the page, otherwise returns false after 100 tries
DYO.Q(DYO.waitForElementAsync("<selector>",1, 10, 100))
.then(function() {
return "True";
}, function() {
return "False";
});
Wait for Dynamic Yield Script
Execute a function after the dynamic yield collection script is on the page and the DOMReady event has been fired. Can be used to wait for Dynamic Yield to load.
Syntax
DY.API('callback',<function>)
Example:
DY.API('callback', function() { console.log('Everything is ready!'); });
Wait for Event, PageView, or Exit Intent
Syntax:
DY.API ('sub', {on: '<condition>', callback: <function>)
Example:
DY.API('sub', {on: 'dy-event', callback: function(event, eventName, properties){
console.log('Custom event fired (' + eventName + '), properties: ' + JSON.stringify(properties));
}});
Execute a function when an event or pageview is registered, or when the user’s mouse is about to leave the page.
Available conditions:
- dy-pageview: triggered whenever DY.API(‘track_pageview’); is called
- dy-event: triggered when an event is fired
- dy-mouse-leave-doc: triggered a bit before the user’s mouse leaves the page (based on our heuristic)