Currently, I am in the process of integrating lazy loading using the IntersectionObserver within my angularjs application.
However, there seems to be an issue where the callback function of the observer is not always being triggered when scrolling up and down.
The directive implemented looks like this:
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
);
});
}
}
};
});
For a demonstration, you can check out this pen.