У меня есть этот код, который я использую для отложенной загрузки изображений:
https://jsfiddle.net/uf9Ldptw/
//Link rel preload
const createPreloadLink = (href, listener) => {
const link = document.createElement('link'); //meta tag link
link.rel = 'preload';
link.as = 'image';
link.href = href;
link.addEventListener('load', listener);
document.head.appendChild(link);
};
const updateBackground = lazyloadEl => {
if (lazyloadEl.classList.contains('loaded')) {
return; // Do nothing if the photo is already loaded
}
const title = lazyloadEl.querySelector('.LazyLoadElement');
title.style.backgroundImage = `url(${title.dataset.backgroundImage})`;
lazyloadEl.classList.add('loaded');
};
const handler = entries => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.intersectionRatio >= 0.75) {
updateBackground(entry.target);
}
});
};
const observer = new IntersectionObserver(handler, { threshold: 0.75 });
//Observer buildin browser. 25% on screen
const cards = document.querySelectorAll('.lazyLoadContainer');
cards.forEach(lazyloadEl => {
const title = lazyloadEl.querySelector('.LazyLoadElement');
const observeEl = () => observer.observe(lazyloadEl);
createPreloadLink(title.dataset.backgroundImage, observeEl);
});
Я использую Intersection Obeserver, так как я создаю внутренний инструмент, который должен быть совместим только с последней версией Chrome и Firefox. Мне не нужна поддержка Safari или IE, поэтому я не исследовал полифилы.
Этот код делает именно то, что я хочу в Chrome, но в Firefox он вообще не работает. Я не получаю никаких ошибок, и из документации Intersection Obeserver поддерживается начиная с Firefox 55, и я в настоящее время на 63.
Что мне там не хватает?