Page Finishes Loading

The Page finishes loading action is used for performing event-based actions that require the DOM to be fully loaded.

Examples of that include:

• Loading third-party libraries that require the DOM to be fully loaded.
• Performing any sort of custom document modifications

Importing libraries

We can import a third-party library at any point by using a run function.

But, if we're using a library that requires the DOM to be loaded, like Swiper we can load it as soon as the page finishes loading.

To do that, we're going to use a Run function as our after-action:

async (c, f, i, n, r, v, e, t) => {
  const { Swiper } = 'https://esm.run/swiper@11'; //[!code focus]

  new Swiper('.swiper');
};

And just like that, we've initialized a new Swiper instance in our Wized project.

Manipulating the DOM

We can perform any arbitrary DOM manipulation in the same way.

For example, if we want to disable scrolling until the page is fully loaded, we can set these two CSS properties in Webflow:

body {
  height: 100%;
  overflow: hidden;
}

Then, we can use a Run function after the page is fully loaded, to make our site scrollable again:

async (c, f, i, n, r, v, e, t) => {
  document.body.style.overflow = 'auto';
};

Now, as soon as the page is fully loaded, overflow will be set to auto, and the page will be scrollable.

In the same way, we can perform any other DOM manipulation.