@igaaar

Как запустить скрипт при показе определенного блока?

На странице есть 30 нативных рекламных блоков.
Каждый рекламный блок имеет конструкцию:
Из div блока
<div id="teaser01" align="center"></div>

И js, который подгружает фрейм с рекламой в нужный div по id.
<script type="text/javascript">
(function(a,e,f,g,b,c,d){a[b]||(a.FintezaCoreObject=b,a[b]=a[b]||function(){(a[b].q=a[b].q||[]).push(arguments)},a[b].l=1*new Date,c=e.createElement(f),d=e.getElementsByTagName(f)[0],c.async=!0,c.defer=!0,c.src=g,d&&d.parentNode&&d.parentNode.insertBefore(c,d))})
(window,document,"script","https://content.mql5.com/core.js","fz");
fz("show","teaser01");
</script>


У каждого рекламного блока своя уникальная метка в div и js вместо teaser01.

Задача: Запускать скрипт 1 раз на странице только при появлении этого блока в поле видимости. Для подсчета реальных показов и ctr.
появился div блок teaser01 — запускаем 1 раз скрипт с меткой teaser01
появился div блок teaser02 — запускаем 1 раз скрипт с меткой teaser02
и т.д.

Как я пытался сделать, найдя похожий вопрос на хабре:
<script type="text/javascript">
var target = $('#teaser01');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
$(window).scroll(function(){
  var winScrollTop = $(this).scrollTop();
  if(winScrollTop > scrollToElem){
    (function(a,e,f,g,b,c,d){a[b]||(a.FintezaCoreObject=b,a[b]=a[b]||function(){(a[b].q=a[b].q||[]).push(arguments)},a[b].l=1*new Date,c=e.createElement(f),d=e.getElementsByTagName(f)[0],c.async=!0,c.defer=!0,c.src=g,d&&d.parentNode&&d.parentNode.insertBefore(c,d))})
(window,document,"script","https://content.mql5.com/core.js","fz");
fz("show","teaser01");
  }
});
</script>


Но данное решение вставляет ∞ количество рекламы в один блок.

Помогите, пожалуйста, скорректировать решение, с учетом того, что на странице будет 30 таких рекламных блоков.
  • Вопрос задан
  • 676 просмотров
Решения вопроса 1
Вам незачем высчитывать пиксели. Для подобных задач используют IntersectionObserver. По ссылке и примеры есть.

Поддерживается практически всеми современными браузерами:
https://caniuse.com/#feat=intersectionobserver
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мая 2022, в 05:58
1500 руб./за проект
29 мая 2022, в 04:59
12000 руб./за проект
29 мая 2022, в 04:32
1000 руб./за проект