2

我有这段代码用于延迟加载图像：

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 支持，所以我没有研究 polyfill。

这段代码在 Chrome 中完全符合我的要求，但在 Firefox 中它根本不起作用。我没有收到任何错误，并且从 Firefox 55 开始支持文档 Intersection Obeserver，而我目前在 63 上。

我在那里想念什么？

4

0 回答 0