onReady( )

Sets the function that runs when all the page elements have finished loading.

Use the onReady() function for code you want to run before the user starts interacting with your page.

The onReady() function in the masterpage.js file is called before the onReady() function in the code for the page being viewed.

The following code should be placed inside the onReady() event handler:

  • Initialization of element properties: Example: Setting a text element's initial text value.
  • Function calls on elements to set their initial state: Example: Disabling a button.
  • Dynamic event handlers that you want bound when the page loads: Example: Setting an event handler to be called when the pointer enters an element.
  • For SEO, return all content you want search bots to see. Search bots can see the results of any function that runs in onReady() and whose promise is resolved before the onReady() promise is resolved. For asynchronous functions, ensure the function's promise resolves first by returning it in onReady(). Example: Return data queries in onReady() if the queried content is populating page elements.

The following code should not be placed inside the onReady() event handler:

  • Static event handlers that are wired using the Properties panel in the Editor are not placed inside the onReady() event handler.
  • return statements containing synchronous functions, especially if there is no impact on rendering (such as a query) and no need for SEO. Avoiding these return statements can improve performance.

Preventing double "side effects"

The onReady() event handler may be called twice during the page rendering process, once server-side and once client-side.

Because onReady() code may be run twice, you need to be aware that if your onReady() code causes a side effect, such as inserting an item into a collection, that side effect might happen twice. To avoid a side effect from happening twice, use wix-window-frontend.rendering.env to determine where your code is being executed.

Method Declaration
Method Parameters

initFunction(): Promise<void> | void The name of the function to run when the page has finished loading.

Was this helpful?