IntersectionObserver не всегда запускается в директиве angularjs

В настоящее время я пытаюсь реализовать ленивую загрузку с помощью IntersectionObserver в моем приложении angularjs.

Но когда я прокручиваю вверх и вниз, он не всегда вызывает функцию обратного вызова наблюдателя.

Моя директива выглядит так:

var app = angular.module("test", []);

app.directive("inViewport", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {    
      const observer = new IntersectionObserver(callback);
      const img = angular.element(element)[0];
      observer.observe(img);

      function callback(changes) {
        changes.forEach(change => {
          change.target.classList.toggle(
            "visible",
            change.intersectionRatio > 0
          );
        });
      }
    }
  };
});

См. эта ручка для демонстрации.

javascript angularjs intersection-observer

15.05.2018 18:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

977

Ответы 1

Используйте change.isIntersecting вместо change.intersectionRatio> 0 в change.target.classList.toggle

Поскольку IntersectionObserver работает асинхронно, при вызове функции обратного вызова будет небольшая задержка.

var app = angular.module("test", []);

app.directive("inViewport", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      
      const observer = new IntersectionObserver(callback);
      
      const img = angular.element(element)[0];
      observer.observe(img);

      function callback(changes) {
        changes.forEach(change => {
          change.target.classList.toggle(
            "visible",
            change.isIntersecting
          );
        });
      }
    }
  };
});

.main div {
  background: green;
  height: 100px;
  width: 100%;
  margin: 10px;
}
    
.main div.visible {
  background: red;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.min.js"></script>


<div ng-app = "test" class = "main">
  <div in-viewport = ""></div>
  <div in-viewport = ""></div>
  <div in-viewport = ""></div>
  <div in-viewport = ""></div>
  <div in-viewport = ""></div>
  <div in-viewport = ""></div>
  <div in-viewport = ""></div>
  <div in-viewport = ""></div>
  <div in-viewport = ""></div>
  <div in-viewport = ""></div>
</div>

13.03.2019 03:50

Другие вопросы по теме

Передача функции в качестве параметра через 2 директивы в angularjs

Объект настройки LocalStorage в ионном списке массива

Модальная прокрутка Bootstrap до нижней части модального окна

Не удается найти пространство имен angular

Firebase / Firestore не возвращает все результаты

Обработчик проблемы нарушения "load" занял 7473 мс

Как избежать перехвата запроса HTTP OPTIONS в промежуточном программном обеспечении express.js auth

Как выбрать несколько строк в Kendogrid без флажка в Angular5

Фильтр даты приводит к тому, что ng-repeat + другие фильтры работают очень медленно в IE11

Передача аргументов в настраиваемую директиву angular

IntersectionObserver не всегда запускается в директиве angularjs

Ответы 1

Другие вопросы по теме

Похожие вопросы