useElementVisibility | Support controls #5190
Description
Clear and concise description of the problem
I want to programmatically control (pause/resume) the useElementVisibility so that I can stop visibility observations when not needed and resume them when conditions change.
Real-world scenario:
When implementing lazy loading for images, I need to monitor when an image element becomes visible to load its content. I need to:
- Use
.pause()to stop monitoring after the current image loads - Use
.resume()to restart monitoring when the src changes, triggering lazy loading for the new image
Currently, it doesn't provide controls option, making it impossible to dynamically pause/resume the observer based on reactive dependencies.
Suggested solution
Similar to useIntersectionObserver and other composables, add a controls: true option to useElementVisibility:
const { isVisible, pause, resume } = useElementVisibility(target, {
controls: true,
})
// Pause observation when not needed
pause()
// Resume observation when conditions change
resume()Alternative
No response
Additional context
No response
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.