onReady( )

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

Description

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.

Syntax

function onReady(initFunction: ReadyHandler): void
initFunction: function ReadyHandler(): Promise<void> | void

onReady Parameters

NAME

TYPE

DESCRIPTION

initFunction

ReadyHandler

The name of the function to run when the page has finished loading.

Returns

This function does not return anything.

Return Type:

void

ReadyHandler Parameters

This function does not take any parameters.

Returns

Return Type:

Promise<void>

void

Related Content:

$w( )

Was this helpful?

Run code in an anonymous function when the page loads

Copy Code

1$w.onReady( function() {
2  let pageTitle = $w("#page1").title;
3} );

Wait for a Promise to resolve

This example demonstrates the technique of returning a Promise so that the page doesn't load until the Promise resolves. Here, we wait for the query to finish and populate a table before displaying the page to users.

Copy Code

1import wixData from 'wix-data';
2
3$w.onReady(function () {
4  return wixData.query("myCollection")
5    .find()
6    .then( (results) => {
7      $w("#myTable").rows = results.items;
8    } );
9} );
10

Where to place code

This example demonstrates which code should be placed inside the onReady() event handler.

Copy Code

1// Import statement go at the top of your code, outside of onReady()
2import wixWindowFrontend from 'wix-window-frontend';
3
4// Initialization statements without $w() don't need to be in onReady()
5let hideCount = 0;
6
7// Code you want to run when the page loads
8$w.onReady(function () {
9  console.log(`Device viewing site is: ${wixWindowFrontend.formFactor}`);
10
11  // Initialize an element property
12  $w("#myTextElement").text = "Hover over to hide";
13
14  // Call a function on an element to set its initial state
15  $w("#buttonReset").disable();
16
17  // Dynamic event handler to be bound when the page loads
18  $w("#myTextElement").onMouseIn( (event) => {
19    event.target.hide();
20    console.log(`Hidden ${++hideCount} times`);
21    $w("#buttonReset").enable();
22  } );
23} );
24
25// Static event handler
26export function buttonReset_onClick(event) {
27	$w("#myTextElement").show();
28  $w("#buttonReset").disable();
29}
30

Use the Rendering API to avoid inserting an item twice

This example demonstrates how to use the env property of the Rendering API to make sure an item is inserted into a collection only once.

Copy Code

1import wixData from 'wix-data';
2import wixWindowFrontend from 'wix-window-frontend';
3
4let toInsert = {
5  "field1": "Some value",
6  "field2": "Some other value"
7};
8
9$w.onReady(function () {
10  if (wixWindowFrontend.rendering.env === "browser") {
11    return wixData.insert("myCollection", toInsert)
12      .then( (item) => {
13        $w("#myText").text = item.title;
14      } );
15  }
16} );
17