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.

0 ответов

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