Control when screenshots are captured with precise timing options. Essential for SPAs, slow-loading pages, and dynamic content that needs time to render.
Modern websites often load content dynamically, making it crucial to wait for the right moment before capturing a screenshot. Our timing options give you complete control over when the screenshot is taken, ensuring you capture the page exactly as intended.
When to use wait & timing options?
Wait a fixed amount of time (in milliseconds) after the page loads before capturing the screenshot. Simple and effective for pages with predictable load times.
numbermilliseconds0const response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: 'https://example.com',
options: {
delay: 3000 // Wait 3 seconds before capturing
}
})
});
// Perfect for pages with animations or fade-ins
const data = await response.json();
console.log('Screenshot captured after delay:', data.data.id);Recommended: Use 1000-3000ms for most pages. Longer delays increase processing time and costs.
Maximum time to wait for the page to load before timing out. If the page doesn't load within this time, the screenshot request will fail. This prevents hanging on broken or very slow pages.
numbermilliseconds30000import requests
response = requests.post(
'https://www.snapshotai.dev/api/v1/screenshots',
headers={
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json'
},
json={
'url': 'https://slow-loading-site.com',
'options': {
'timeout': 60000, # Wait up to 60 seconds
'delay': 2000 # Then wait 2 more seconds
}
}
)
# Useful for slow APIs or heavy pages
data = response.json()
print(f"Screenshot captured: {data['data']['id']}")Note: Default timeout is 30 seconds. Increase only for legitimately slow pages to avoid unnecessary wait times.
Wait until a specific element appears in the DOM before capturing. Perfect for SPAs where content loads dynamically via JavaScript. Specify any valid CSS selector.
stringCSS selectornullconst response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: 'https://dashboard.example.com',
options: {
wait_for_selector: '#chart-container', // Wait for chart to render
timeout: 45000 // Give it 45 seconds max
}
})
});
// Perfect for React/Vue/Angular apps
const data = await response.json();
console.log('Chart loaded and captured:', data.data.id);#data-tableWait for element with ID.content-loadedWait for element with class[data-ready="true"]Wait for attribute valuediv.dashboard-gridWait for specific element typeWait until network activity has stopped (no more than 2 network connections for at least 500ms). Ideal for pages that make multiple API calls or load resources dynamically.
boolean≤2 connectionsfalsecurl -X POST https://www.snapshotai.dev/api/v1/screenshots \
-H "Authorization: Bearer sk_live_YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"url": "https://api-heavy-dashboard.com",
"options": {
"wait_for_network_idle": true,
"timeout": 60000
}
}'Best for: Dashboards with real-time data, pages loading from multiple APIs, or sites with heavy XHR/Fetch activity.
For maximum reliability, combine multiple wait options. They work together to ensure the perfect capture timing.
const response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: 'https://complex-spa.com',
options: {
// Wait for network to settle
wait_for_network_idle: true,
// Then wait for key element to appear
wait_for_selector: '#main-content',
// Then wait additional 2 seconds for animations
delay: 2000,
// But timeout after 60 seconds total
timeout: 60000
}
})
});
// Order of operations:
// 1. Page loads
// 2. Wait for network idle
// 3. Wait for #main-content selector
// 4. Wait 2000ms delay
// 5. Capture screenshot
// (Or timeout after 60 seconds total)React, Vue, Angular apps that render content client-side via JavaScript.
{
"wait_for_selector": ".app-loaded",
"delay": 1000
}Dashboards or pages loading data from external APIs.
{
"wait_for_network_idle": true,
"timeout": 45000
}Pages with CSS animations, transitions, or JavaScript effects.
{
"delay": 2500,
"wait_for_selector": ".animation-complete"
}Content loaded via AJAX, infinite scroll, or lazy loading.
{
"wait_for_selector": "[data-loaded='true']",
"wait_for_network_idle": true
}Start with wait_for_selector
More reliable than fixed delays. Identify a key element that indicates content is loaded and wait for it to appear.
Use delay for Final Polish
Add a small delay (500-2000ms) after selectors/network idle to allow animations or transitions to complete.
Set Reasonable Timeouts
Default 30s is usually enough. Only increase if you have legitimate slow pages. Long timeouts increase processing time and costs.
Test Different Configurations
Every site is different. Test with different wait options to find the optimal configuration for your specific pages.
Save as Templates
Once you find the perfect timing configuration for a site, save it as a template for consistent results.
Solution:
wait_for_selector for key content elementwait_for_network_idledelay to 2000-3000msSolution:
timeout to 45000-60000mswait_for_network_idle if page has streaming/pollingSolution:
delay to minimum neededwait_for_selector instead of long delaystimeout to fail faster on broken pagesOur team can help you find the optimal wait settings for your specific pages.