Wait for Element Client-Side APIs

These 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)

Parameter	Description
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 is rechecked for the element (in milliseconds)
maximumRetries	Optional. Default: infinity Maximum number of times to recheck the page for the element 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 return a promise.

Syntax:

DYO.waitForElementAsync (selector, minElements, interval, maximumRetries)

Parameter	Description
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 is rechecked for the element (in milliseconds)
maximumRetries	Optional. Default: infinity Maximum number of times to recheck the page for the element 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)