阅读element-ui之el-image懒加载如何判断子元素出现在父元素内

1.核心代码

（1）isInContainer 函数

// 判断子元素是否出现在父元素内
export const isInContainer = (el, container) => {
  if (isServer || !el || !container) return false;

  const elRect = el.getBoundingClientRect();
  let containerRect;

  // 排除掉不支持getBoundingClientRect的元素
  if ([window, document, document.documentElement, null, undefined].includes(container)) {
    containerRect = {
      top: 0,
      right: window.innerWidth,
      bottom: window.innerHeight,
      left: 0
    };
  } else {
    containerRect = container.getBoundingClientRect(); // 获取元素大小及其相对于视口的位置
  }

  // 这里的四个方向判断：保证子元素出现在父元素盒子内即可。不要求子元素左右两边都包含于父元素内
  // 法一判断：
  return elRect.top < containerRect.bottom &&
    elRect.bottom > containerRect.top &&
    elRect.right > containerRect.left &&
    elRect.left < containerRect.right;

  // 这里的四个方向判断：要求子元素左右两边都包含于父元素内
  // 法二判断：
  // return elRect.top < containerRect.bottom &&
  //   elRect.bottom > containerRect.top &&
  //   elRect.right <= containerRect.right &&
  //   elRect.left >= containerRect.left;
};

（2）注解：

（下面图片中展示的图片是有两张的，由于懒加载，网络只加载一张）
法一判断的父子元素结构如下：子元素左右两边不完全在父元素视野内。

法二判断的父子元素结构如下：子元素左右两边必须完全在父元素视野内。

显然，法一的判断更合理。

2.如何懒加载

• 通读代码了解到，就是利用节流函数优化监听图片元素是否出现在父元素内。出现了，则加载该图片。