Vue实现懒加载

方式一. 使用第三方库intersection-observer-polyfill

1. 安装工具依赖

npm i intersection-observer-polyfill

2. 定义懒加载规则

import IntersectionObserver from 'intersection-observer-polyfill';

let callback = null;

IntersectionObserver.prototype.POLL_INTERVAL = 50;
const observer = new IntersectionObserver((entries) => {
  entries.forEach((el) => {
    if (el.intersectionRatio > 0) {
      if (callback) callback(el.target);
      observer.unobserve(el.target);
    }
  });
}, {
  rootMargin: '0px -100px 0px 0px',
  threshold: 0.1, // 元素出现的阈值
});
// observer.POLL_INTERVAL = 50

export const observerBox = function (target, fn) {
  observer.observe(target);
  callback = fn;
};

3. 懒加载元素设置

observerBox(this.$refs.lazyElement, (target) => {
      // todo something
    });

方式二：原生实现元素是否在可视区

计算视口与元素距离，视口可视区滚动监听时计算需要注意要节流

 /**
  * 获取窗口滚动条的上边距
  * @return {int} 上边距
  */
function getScrollTop() {
      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    }

/**
 * 获取窗口可见高度
 * @return {int} 高度
 */
 getClientHeight: function () {
      return document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight;
 }


function checkElementClientVisible($el) {
      var boxTop = $el.offset().top;
      var boxBottom = boxTop + $el.height();
      var scrollTop = getScrollTop();
      var clientBottom = scrollTop + getClientHeight();


      // 元素在可视区域内
      if ((boxTop > scrollTop && boxTop < clientBottom) || (boxBottom > scrollTop && boxBottom < clientBottom)) {
        return true;
      }


      return false;
    }

方式三：vue-lazyload 插件实现

缺点全局引入