> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vortexpdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Wait for element

> Ensure dynamic content is fully loaded by waiting for a specific element attribute before rendering

The `wait_for` parameter allows you to delay rendering until a specific element attribute is present on the page.

## Overview

When rendering pages with dynamic content, you may need to ensure certain elements are fully loaded before capturing the page. The `wait_for` parameter lets you specify an element and attribute to wait for before proceeding with rendering.

## Parameter details

<ResponseField name="wait_for" type="object">
  Delays rendering until a specific element attribute is present on the page

  <Expandable title="Properties">
    <ResponseField name="selector" type="string" required>
      CSS selector for the target element
    </ResponseField>

    <ResponseField name="attribute" type="string" required>
      Attribute name to wait for on the selected element
    </ResponseField>
  </Expandable>
</ResponseField>

## Usage

```javascript theme={null}
{
  "parts": "https://example.com",
  "wait_for": {
    "selector": "#dynamic-content",
    "attribute": "data-loaded"
  }
}
```

## Behavior

The rendering process will wait until the specified attribute exists on the element matching the provided CSS selector. This is useful for ensuring that dynamic content has finished loading before the PDF is generated.

## Use cases

This parameter is particularly useful for:

1. **Single-page applications**: Wait for specific UI components to finish rendering before capturing the page.

2. **Lazy-loaded content**: Ensure images, data, or other resources that load asynchronously are fully rendered.

3. **Custom loading indicators**: Wait for your application's own loading state to indicate completion.

## Examples

### Waiting for content to load

```javascript theme={null}
{
  "parts": "https://example.com",
  "wait_for": {
    "selector": "#content-container",
    "attribute": "data-loaded"
  }
}
```

### Waiting for images to load

```javascript theme={null}
{
  "parts": "https://example.com",
  "wait_for": {
    "selector": ".hero-image",
    "attribute": "data-loaded"
  }
}
```

### Waiting for application state

```javascript theme={null}
{
  "parts": "https://example.com",
  "wait_for": {
    "selector": "body",
    "attribute": "data-app-ready"
  }
}
```

### Combining with `evaluate_js`

You can use `evaluate_js` to set the attribute that `wait_for` is looking for:

```javascript theme={null}
{
  "parts": "https://example.com",
  "evaluate_js": {
    "expression": "setTimeout(() => { document.querySelector('#content').setAttribute('data-ready', 'true'); }, 2000)"
  },
  "wait_for": {
    "selector": "#content",
    "attribute": "data-ready"
  }
}
```