CODEWITHSUNDEEP
javascriptajaximagejqueryhtml
legendstyler
legendstyler

Reputation: 33

Take action when an image on a webpage is loaded and seen by the user

I need to take an action (Call a WEB URL) when an image on a webpage is loaded and is seen by the user (image is not hidden in a scrollable area). If the user scrolls down, and the image gets displayed, then we take the same action.

Is this possible? Using AJAX and Javascript focus? Does focus differentiate between (a) images that are loaded and displayed on screen and (b) images that are loaded but not displayed (because they are still down the scrollable page).

Would really appreciate your help.

Thanks

Upvotes: 0

Views: 198

Answers (2)

beeglebug
beeglebug

Reputation: 3552

Look into the following properties: document.body.scrollTop, document.body.clientHeight and image.offsetTop.

Doing a quick calculation using those every time the page scrolls (window.onscroll) should let you know if the image is visible or not.

Upvotes: 0

Martin Jespersen
Martin Jespersen

Reputation: 26183

You can hook into the onload event of the image and the onscroll event on the container.

Use math to see if the images offset is in the viewport (inside the onscroll) and check the images onload - when both criteria are met, you have arrived at your destination.

Upvotes: 1

Related Questions