API наблюдателя пересечения - фоновое изображение - PullRequest
Новая
       12

API наблюдателя пересечения - фоновое изображение

0 голосов
/ 26 ноября 2018

Я пытаюсь реализовать API-интерфейс Intersection Observer для встроенных фоновых изображений (для отложенной загрузки).Однако это 404 и возвращает неопределенную ошибку.Причина, по которой фоновые изображения встроены, заключается в том, что веб-сайт работает на WordPress, поэтому ему необходимо извлечь изображения из библиотеки мультимедиа.

JS и CSS находятся в нижнем колонтитуле, я пытался поставить его в голову, но безуспешно.Он работает с обычными тегами img, но не с фоновыми изображениями.

Вот код:

HTML 

<div class="image js-img" style="background-image:url('<?= $image ?>');">

CSS 

 .js-img.fade {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}        

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

JS 

const images = document.querySelectorAll('.js-img');

if(!('IntersectionObserver' in window)) {
    images.forEach(image => {
        handleImage(image);
    })
} else {
    let config = {
        rootMargin: '100px 0px',
        threshold: 0.01
    };
    let observer = new IntersectionObserver(observeImages, config);

    images.forEach(image => {
        observer.observe(image);
    }) 

    function observeImages(entries) {
        entries.forEach(entry => {
            if(entry.intersectionRatio > 0) {
                observer.unobserve(entry.target);
                handleImage(entry.target);
            }
        })
    } 
}

function handleImage(el) {
    preloadImage(el.dataset.src).then(src => {
        el.tagName === 'IMG' ?
            el.src = src :
            el.style.backgroundImage = 'url('+ src +')';

        el.classList.add('fade');
        el.removeAttribute('data-src');
    })    
}

function preloadImage(url) {
    return new Promise((resolve,reject) => {
        let image = new Image();
        image.load = resolve(url);
        image.error = reject;
        image.src = url;
    })
}
...