Javascript 交叉口观察员未在FF中运行

Javascript 交叉口观察员未在FF中运行,javascript,lazy-loading,intersection-observer,Javascript,Lazy Loading,Intersection Observer,我有一段用于延迟加载图像的代码: 由于Im构建了一个只需与最新版本的Chrome和Firefox兼容的内部工具,因此Im使用了Intersection Server。我不需要任何Safari或IE支持,所以我没有调查polyfills 这段代码完全符合我在Chrome中的要求,但在Firefox中根本不起作用。我没有收到任何错误,并且从文档中可以看出,Firefox 55支持该服务器,而我目前在63上 我错过了什么 您是否已检查Firefox浏览器的about:config,以确保dom.In

我有一段用于延迟加载图像的代码:

由于Im构建了一个只需与最新版本的Chrome和Firefox兼容的内部工具,因此Im使用了Intersection Server。我不需要任何Safari或IE支持,所以我没有调查polyfills

这段代码完全符合我在Chrome中的要求,但在Firefox中根本不起作用。我没有收到任何错误,并且从文档中可以看出,Firefox 55支持该服务器,而我目前在63上


我错过了什么

您是否已检查Firefox浏览器的
about:config
,以确保
dom.IntersectionObserver.enabled
首选项为真?我不认为这应该是必要的,但可能是。是的,我刚刚检查过,它被设置为trueFWIW。我想我可以在我的Firefox浏览器版本63中重现您的JSFIDLE所显示的明显问题。也就是说,它的行为不同于Chrome(只显示蓝色卡片而不是白色占位符图像)。是的,Firefox是我唯一的问题,我希望它的行为类似于Chrome,当用户滚动时,所有蓝色方块都被替换为白色占位符。
//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);
});