懒加载与锚点ID的ScrollTo滚动冲突导致中途停止如何修复？

该问题的根源是懒加载图片未提前预留占位空间，图片加载时会撑开页面高度，导致点击锚点时预先计算的目标元素top坐标失效，滚动过程中页面高度突变，最终出现滚动不到位、中途停止的情况。

• 方案1：给懒加载图片预留占位空间（最优方案，性能损耗最低）
  这是从根源解决布局偏移的方案，无需修改现有JS逻辑，仅需调整HTML和CSS：

  1. 给所有<img data-lazy>标签提前加上原生width和height属性，填写图片的实际宽高值
  2. 全局添加CSS规则：

  img[data-lazy] {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height); /* 现代浏览器自动根据宽高属性计算比例预留空间 */
  }
  

  这样图片加载前就会占住对应大小的位置，加载完成后不会改变页面布局，滚动坐标计算就不会出错。

• 方案2：调大懒加载触发阈值（辅助优化，改动最小）
  修改懒加载的IntersectionObserver配置，扩大rootMargin的范围，让图片在离视口更远的位置就提前触发加载，避免滚动到附近时才加载导致布局突变：
  把懒加载代码里的settings改成：

  const settings = {
      rootMargin: '300px 0px', // 上下各提前300px触发加载，可根据实际情况调整
      threshold: 0.02
  };
  

  这个方案可以大幅降低滚动过程中图片加载的概率，配合方案1使用效果更佳。

• 方案3：锚点点击时提前加载目标区域前的所有懒加载图片（兼容无法预留占位的场景）
  如果业务场景无法提前获取图片宽高做占位，可以修改滚动逻辑，点击锚点时先加载目标元素上方所有未加载的懒加载图片，全部加载完成后再计算位置执行滚动：
  修改后的滚动代码如下：

  (() => {
      // 等待指定图片加载完成的工具函数
      const waitImagesLoad = (images) => {
          return Promise.all(images.map(img => {
              if (img.classList.contains('loaded')) return Promise.resolve();
              return new Promise(resolve => {
                  img.onload = img.onerror = resolve;
                  img.src = img.dataset.lazy;
                  img.classList.add('loaded');
                  const observer = window.lazyObserver; 
                  if (observer) observer.unobserve(img);
              })
          }))
      }
  
      document.querySelectorAll('a[href^="#"]').forEach((elem) => {
          elem.addEventListener('click', async (e) => {
              e.preventDefault();
              let block = document.querySelector(elem.getAttribute('href')),
                  offset = elem.dataset.offset
                      ? parseInt(elem.dataset.offset)
                      : 0;
              
              // 筛选目标元素上方所有未加载的懒加载图片
              const allLazyImgs = [...document.querySelectorAll('[data-lazy]:not(.loaded)')];
              const blockTop = block.getBoundingClientRect().top;
              const topImgs = allLazyImgs.filter(img => {
                  return img.getBoundingClientRect().top < blockTop
              })
  
              // 等待所有上方图片加载完成
              await waitImagesLoad(topImgs);
  
              // 重新计算坐标后滚动
              const bodyOffset = document.body.getBoundingClientRect().top;
              window.scrollTo({
                  top: block.getBoundingClientRect().top - bodyOffset + offset,
                  behavior: 'smooth'
              });
          });
      });
  })();
  

  同时要修改懒加载代码，把observer挂到window上方便调用：

  (() => {
      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);
          // 把observer挂到window上方便滚动逻辑调用
          window.lazyObserver = observer;
          images.forEach((image) => observer.observe(image));
      };
  
      runLazy();
  
  })();
  

  这个方案的缺点是会提前加载部分不在当前视口的图片，会增加一点带宽消耗，但能保证滚动位置100%准确。

内容的提问来源于stack exchange，提问作者Galanthus