2

我的页面上有一个 scrollTo 功能，当您单击特定按钮时，您会滚动到具有唯一 ID 的部分。

问题是我对我网站上的图像使用延迟加载，这将导致 ScrollTo 由于延迟加载的图像而在页面中途停止。

毕竟，图像已加载，我再次单击它工作正常的按钮。

我的延迟加载代码：

(() => {
    const runLazy = () => {
        let images = [...document.querySelectorAll('[data-lazy]')];

        const settings = {
            rootMargin: '0px',
            threshold: 0.02
        };

        let observer = new IntersectionObserver((imageEntites) => {
            imageEntites.forEach((image) => {
                if (image.isIntersecting) {
                    observer.unobserve(image.target);
                    image.target.src = image.target.dataset.lazy;
                    image.target.onload = () =>
                        image.target.classList.add('loaded');
                }
            });
        }, settings);

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

    runLazy();

})();

我的滚动代码：

(() => {
    document.querySelectorAll('a[href^="#"]').forEach((elem) => {
        elem.addEventListener('click', (e) => {
            e.preventDefault();
            let block = document.querySelector(elem.getAttribute('href')),
                offset = elem.dataset.offset
                    ? parseInt(elem.dataset.offset)
                    : 0,
                bodyOffset = document.body.getBoundingClientRect().top;
            window.scrollTo({
                top: block.getBoundingClientRect().top - bodyOffset + offset,
                behavior: 'smooth'
            });
        });
    });
})();

有没有办法来解决这个问题？

4

1 回答 1

2

这似乎是由延迟加载期间的图像大小更改事件引起的。

所以你可以设置固定height和width延迟加载图像，跳过这个问题。

编辑：

由于固定图像大小不合适，您可以使用location.href = '#your-image-tag', 加号window.scrollBy来解决此问题image.onload。

关键代码：

(() => {
  document.querySelectorAll('a[href^="#"]').forEach((elem) => {
      elem.addEventListener('click', (e) => {
          e.preventDefault();
          location.href = elem.getAttribute('href')
      });
  });
})()

image.target.onload = () => {
  image.target.classList.add("loaded");

  // TODO: check current image below or upper the target image
  window.scrollBy(0, image.target.clientHeight)
  // or window.scrollBy(0, 0 - image.target.clientHeight)
}

现场演示：https ://codesandbox.io/s/focused-field-2q3py?file=/src/index.js

于 2021-07-21T10:06:30.467 回答