Принять меры, когда изображение на веб-странице загружено и увидено пользователем

Question

Мне нужно выполнить действие (вызов веб-URL), когда изображение на веб-странице загружено и просматривается пользователем (изображение не скрыто в области с возможностью прокрутки). Если пользователь прокручивает страницу вниз и изображение отображается, мы предпринимаем те же действия.

Возможно ли это? Используете AJAX и Javascript focus? Различает ли фокус между (а) изображениями, которые загружаются и отображаются на экране, и (б) изображениями, которые загружаются, но не отображаются (потому что они все еще находятся на прокручиваемой странице).

Буду очень признателен за вашу помощь.

Спасибо

Answer 1

Вы можете подключиться к событию onload изображения и событию onscroll для контейнера.

Используйте математические вычисления, чтобы увидеть, находится ли смещение изображений в окне просмотра (внутри прокрутки), и проверьте загрузку изображений - когда оба критерия выполнены, вы достигли пункта назначения.

Answer 2

Может быть, этот ответ может помочь вам:

Получить размер изображения при загрузке с внешнего URL в Javascript

Answer 3

Просмотрите следующие свойства: document.body.scrollTop, document.body.clientHeight и image.offsetTop.

Выполнение быстрого расчета с использованием этих значений при каждом прокрутке страницы (window.onscroll) должно дать вам знать, является ли изображение видимым или нет.