Форум

Зосимов · #1 (**permalink**) 17.01.2017, 06:02

Всем привет.
Есть три элемента div на странице.
Задача, загружать контент в элемент, когда он полностью появился на странице.
Сами элементы статичные div с рамкой.
(на картинке окно черное. второй div красный еще не полностью в окне)

Понимаю что надо как то получить координаты элемента, и когда он будет в области видимости полностью, произвести событие. Но как определить в окне он или нет, разобраться не могу.
Спасибо.

рони · #2 (**permalink**) 17.01.2017, 08:40

Сообщение от Зосимов

когда он будет в области видимости полностью

function checkViewport(el) {
    var H = document.documentElement.clientHeight,
        pos = el.getBoundingClientRect();
        return pos.top  > 0 && pos.bottom  < H
    }

Зосимов · #3 (**permalink**) 17.01.2017, 09:48

checkViewport($('.bz'));

подскажите, правильно ли я вызываю функцию передавая ей div элемент?
и еще вопрос - когда нужно вызывать данную функцию? если ее вызывать в $(window).scroll то получается при каждом скролле будет вызываться функция.

рони · #4 (**permalink**) 17.01.2017, 10:27

Зосимов,

checkViewport($('.bz')[0]);

Сообщение от Зосимов

$(window).scroll то получается при каждом скролле будет вызываться функция.

да, поставьте блоку класс "отработано" -- нет класса что -то делаем и добавляем класс -- иначе отмена

Зосимов · #5 (**permalink**) 17.01.2017, 11:17

Сообщение от рони

да, поставьте блоку класс "отработано" -- нет класса что -то делаем и добавляем класс -- иначе отмена

но если изменить/удалить класс, то дальше вызывается ошибка при скролле. так как элемент не существует.
может есть еще способ выполнить функцию один раз?

рони · #6 (**permalink**) 17.01.2017, 11:27

Сообщение от Зосимов

то дальше вызывается ошибка при скролле

видимо нет

Сообщение от рони

иначе отмена

рони · #7 (**permalink**) 17.01.2017, 11:38

Зосимов,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .bz{
    height: 300px;
    width: 100px;
    font-size: 22px;
    line-height: 44px;
    color: #FFFFFF;
    background-color: #8B4513;
    text-align: center;
    margin-top: 30px;
   }
  p{
    height: 2000px;
  }
  .worked {
    background-color: #FF00FF;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {

    function checkViewport(el) {
    var H = document.documentElement.clientHeight,
        pos = el.getBoundingClientRect();
        return pos.top  > 0 && pos.bottom  < H
    }

    $(window).scroll(function() {
        $('.bz:not(.worked)').each(function(indx, el) {
            var visibility = checkViewport(el);
            if(visibility) {$(el).addClass('worked');
            // load data
            }

        })
    })
});
  </script>
</head>

<body>
<p></p>
<div class="bz" >0</div>
<div class="bz" >0</div>
<div class="bz" >0</div>
<p></p>
</body>
</html>

Зосимов · #8 (**permalink**) 17.01.2017, 11:45

рони, спасибо !
сделал в общем так -

if (!$('#bzh').hasClass('sel')) {
    console.log("good");
    $( ".bz" ).addClass("sel");
    }

вроде срабатывает только один раз.

Форум

Справочник

Discord чат

Курсы javascript