Intersection Observer неправильно обрабатывает пороговые значения
Я использую IntersectionObserver для отложенной загрузки изображений. Работает в основном нормально, кроме одной вещи.
При установке нескольких пороговых значений все значения, кроме одного, игнорируются. Я хочу загрузить изображения, как только они попадут в область просмотра (порог 0), и вызвать функцию (не связанную с загрузкой) с более высоким порогом 0,5.
public lazyLoad(): void {
const lazyImages = [].slice.call(document.querySelectorAll('.lazyImage'));
if ('IntersectionObserver' in window) {
const config = { threshold: [0, 0.5] };
const lazyImageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
// code to load images
console.log('within view');
}
if (entry.intersectionRatio > 0.5) {
console.log('more than half');//This is never fired
}
});
}, config);
console.log(lazyImageObserver);
lazyImages.forEach((lazyImage: any) => {
lazyImageObserver.observe(lazyImage);
});
}
}
С threhold
установлен в [0, 0.5]
он летит только на отметке 0,5.
Когда порог равен примерно [0, 0,01, 0,5, 0,99], он срабатывает только при 0. С одним значением он работает, как и ожидалось.
Есть идеи, почему это не работает? Я пробовал это в Chrome и Firefox.