Timing & Waiting Options
Perfect screenshot timing with custom delays, CSS selector waiting, element ID detection, and automatic page load detection for JavaScript-heavy and dynamic websites.
Control when the screenshot is taken by adding delays or waiting for specific elements to appear. These options are essential for capturing dynamic content, animations, and JavaScript-rendered pages.
Timing Parameters
Delay (delay)
- Default:
0seconds - Description: Fixed delay before capturing the screenshot
- Range: 0-60 seconds (use edge endpoint for delays > 25 seconds)
- Example:
delay=3waits 3 seconds before capture
Wait for CSS Selector (waitFor)
- Default: None
- Description: Waits for an element matching the CSS selector to appear
- Timeout: 30 seconds maximum
- Example:
waitFor=.loading-complete
Wait for Element ID (waitForId)
- Default: None
- Description: Waits for an element with specific ID to appear
- Timeout: 30 seconds maximum
- Example:
waitForId=content-loaded
Usage Examples
Simple Delay
Wait 5 seconds for page animations:
https://cdn.capture.page/KEY/HASH/image?url=https://example.com&delay=5Wait for Specific Element
Wait for dynamic content to load:
https://cdn.capture.page/KEY/HASH/image?url=https://example.com&waitFor=.chart-containerWait for Element by ID
https://cdn.capture.page/KEY/HASH/image?url=https://example.com&waitForId=data-tableCommon Scenarios
Single Page Applications (SPAs)
SPAs often render content after initial page load:
// Wait for React app to mount
&waitFor=.app-ready
// Wait for Vue component
&waitFor=[data-v-mounted="true"]
// Wait for Angular component
&waitFor=app-root.ng-star-insertedLazy-Loaded Images
Ensure images are loaded before capture:
// Wait for specific image
&waitFor=img.hero-image
// Wait for all images in container
&waitFor=.gallery img:last-childLoading Animations
Skip loading states:
// Wait for loader to disappear
&waitFor=body:not(.loading)
// Wait for skeleton screens to be replaced
&waitFor=.content:not(.skeleton)Data Visualizations
Capture charts after they render:
// Chart.js
&waitFor=canvas.chart-rendered
// D3.js visualizations
&waitFor=svg.visualization-complete
// Highcharts
&waitFor=.highcharts-containerBest Practices
1. Prefer waitFor Over delay
Dynamic waits are more reliable and faster than fixed delays:
// Better: Wait for specific condition
&waitFor=.content-loaded
// Avoid: Arbitrary delay
&delay=102. Use Specific Selectors
Target the exact element you're waiting for:
// Good: Specific to content
&waitFor=article.post-content
// Bad: Too generic
&waitFor=div3. Combine Multiple Strategies
For complex loading scenarios:
// Initial delay + element wait
&delay=1&waitFor=.charts-container
// Wait for ID then add small delay for animations
&waitForId=dashboard&delay=0.54. Handle Timeout Gracefully
If element might not appear:
- Set appropriate expectations
- Consider fallback strategies
- Monitor timeout failures
Advanced Waiting Strategies
Wait for Text Content
// Wait for specific text to appear
&waitFor=h1:contains("Welcome")
// Wait for non-empty element
&waitFor=.price:not(:empty)Wait for Attribute Changes
// Wait for data attribute
&waitFor=[data-loaded="true"]
// Wait for class addition
&waitFor=.modal.openWait for Network Idle
While not directly supported, you can approximate:
// Wait for loading indicators to disappear
&waitFor=body:not(.ajax-loading)
// Wait for final element in AJAX response
&waitFor=.pagination-loadedPerformance Optimization
1. Minimize Wait Times
- Use the most specific selector possible
- Target the first reliable indicator of readiness
- Avoid waiting for elements that load last
2. Edge Endpoint for Long Waits
For delays exceeding 25 seconds:
// Use edge endpoint
https://edge.capture.page/KEY/HASH/image?url=site.com&delay=45
// Instead of CDN endpoint
https://cdn.capture.page/...3. Timeout Considerations
- Default timeout is 30 seconds
- Plan for timeout scenarios
- Log and monitor timeout occurrences
Common Patterns by Framework
React Applications
// Root component mounted
&waitFor=#root>div
// Specific component loaded
&waitFor=[data-testid="main-content"]
// Redux state updated
&waitFor=[data-ready="true"]Vue.js Applications
// Vue app mounted
&waitFor=#app>div
// Component lifecycle
&waitFor=.vue-component-mounted
// Vuex store populated
&waitFor=[data-store-ready]Angular Applications
// Angular bootstrapped
&waitFor=app-root>*
// Component rendered
&waitFor=.ng-star-inserted
// HTTP calls completed
&waitFor=.data-loadedDebugging Tips
1. Element Not Found
If waitFor times out:
- Verify selector in browser DevTools
- Check if element is in iframe
- Ensure element isn't removed after appearing
2. Premature Capture
If capturing too early:
- Element might appear briefly then change
- Use more specific end-state selector
- Add small delay after element appears
3. Inconsistent Results
For flaky captures:
- Identify all dynamic elements
- Use most stable indicator
- Consider multiple wait conditions
Combining with Other Options
With Full Page Capture
// Wait for content then capture full page
&waitFor=.all-content-loaded&full=trueWith Element Selection
// Wait for element then capture it
&waitFor=.chart-container&selector=.chart-containerWith Dark Mode
// Wait for theme to apply
&darkMode=true&waitFor=body.dark-themeCapture Area & Selection
Precise screenshot control with full-page capture, element selection via CSS selectors, custom clipping regions, and viewport-specific cropping for perfect captures.
Page Enhancements
Capture cleaner screenshots with dark mode, cookie banner dismissal, ad blocking, and bot detection bypass. Remove distractions for professional-looking captures.