Скрыть предметы за пределами видимой области

Question

Скрыть предметы за пределами видимой области

1

Я лениво загружаю элементы (gifs) на свою страницу. Сценарий у меня работает отлично. Но я также хотел бы скрыть их (display:none;), когда они находятся за пределами видимой области. Мой сценарий lazyload:

refresh_handler = function(e) {
var elements = document.querySelectorAll("*[realsrc]");
for (var i = 0; i < elements.length; i++) {
       var boundingClientRect = elements[i].getBoundingClientRect();
       if (elements[i].hasAttribute("realsrc") && boundingClientRect.top < window.innerHeight) {
           elements[i].setAttribute("src", elements[i].getAttribute("realsrc"));
           elements[i].removeAttribute("realsrc");
       }
   }
};

window.addEventListener('scroll', refresh_handler);
window.addEventListener('load', refresh_handler);
window.addEventListener('resize', refresh_handler);

Я попытался скрыть их, добавив условие в цикл for:

if (boundingClientRect.top > window.innerHeight) {
elements[i].getAttribute("src").style.display="none";
}

Эта последняя часть не работает. Почему я не понимаю?

Любая идея?

Maasha Theytaz 13 окт. 2018, в 06:48

Источник

3

ты пробовал? : elements [i] .style.display = "нет";
Piotr Mirosz 13 окт. 2018, в 04:45
0

Я думаю, что лучший способ сделать это - в основном использовать CSS. Вы можете указать свою область Переполнение: скрыто; и все элементы, которые за пределами этой области не будут видны.
Talg123 13 окт. 2018, в 05:26
0

почему вы используете .getAttribute ("src"). style .....?
Talg123 13 окт. 2018, в 05:29
0

Пожалуйста, прикрепите JSFiddle к вашему сообщению
rv7 13 окт. 2018, в 06:21
0

@PiotrMirosz Я пробовал, но это не работает. Элементы больше не ленивые :(
Maasha Theytaz 13 окт. 2018, в 10:50

Показать ещё 3 комментария

Теги:

javascript

2 ответа

Ещё вопросы

ты пробовал? : elements [i] .style.display = "нет";
Я думаю, что лучший способ сделать это - в основном использовать CSS. Вы можете указать свою область Переполнение: скрыто; и все элементы, которые за пределами этой области не будут видны.
почему вы используете .getAttribute ("src"). style .....?
Пожалуйста, прикрепите JSFiddle к вашему сообщению
@PiotrMirosz Я пробовал, но это не работает. Элементы больше не ленивые :(

Amit chauhan · Answer 1 · 2018-10-13T05-01-00.000Z

Попробуйте изменить

if (boundingClientRect.top > window.innerHeight) {
    elements[i].getAttribute("src").style.display="none";
}

с

if (boundingClientRect.top > window.innerHeight) {
    elements[i].style.display="none";  // this will hide the element 
}

Спасибо за Ваш ответ. Я попробовал это, но тогда lazyload больше не работает :( Любое предложение?

Bigga_HD · Answer 2 · 2018-10-13T04-42-00.000Z

Я предлагаю посмотреть на jquery-visible. Проверьте демоверсию. И, конечно, смотрю на мой фрагмент кода. Возможно, это правильный путь (для вас). В любом случае, я надеюсь, что это было полезно. :)

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
  $('.color').each(function() {
      var activeColor = $(this).attr('id');
    if ($(this).isInViewport()) {
      $('#fixed-' + activeColor).addClass(activeColor + '-active');
    } else {
      $('#fixed-' + activeColor).removeClass(activeColor + '-active');
    }
  });
});

html,
body {
  height: 100%;
}

.fixed-red,
.fixed-green,
.fixed-blue {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 10px;
  left: 10px;
  background: #333;
}

.fixed-green {
  top: 50px;
}

.fixed-blue {
  top: 90px;
}

.red-active {
  background: #f00;
}

.green-active {
  background: #0f0;
}

.blue-active {
  background: #00f;
}

.color {
  width: 100%;
  height: 100%;
}

#red {
  background: #900;
  text-align: center;
  font-size:3rem;
  font-weight: bold;
}

#green {
  background: #090;
  text-align: center;
  font-size:3rem;
  font-weight: bold;
  color: yellow;
}

#blue {
  background: #009;
  text-align: center;
  font-size:3rem;
  font-weight: bold;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed-red" class="fixed-red red-active"></div>
<div id="fixed-green" class="fixed-green"></div>
<div id="fixed-blue" class="fixed-blue"></div>
<div id="red" class="color">Viewport 1</div>
<div id="green" class="color">Viewport 2</div>
<div id="blue" class="color">Viewport 3</div>