Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

appear-polyfill是否可以开放自定义intersectionObserver视窗的能力? #8

Open
kenny-shaw opened this issue Sep 1, 2021 · 1 comment

Comments

@kenny-shaw
Copy link

最近在做性能优化的事情,其中有关于图片懒加载这一块的事情,目前依赖于rax-picture组件提供的懒加载能力,但是rax-picture依赖于appear-polyfill,只提供了进入屏幕视窗才进行加载,这样的话有损用户体验,所以想做一个有个距离阈值的懒加载,距离屏幕一定距离的时候就开始加载图片。目前想要先开放appear-polyfill的自定义视窗的能力。
具体修改可以参考下面的代码

//修改后
// appear-polyfill
// createIntersectionObserver
const myOptions = {
  rootMargin: '0px 0px 300px 0px',//视窗范围影响参数
};

export function setupAppear(win,options) {
  console.log('myappearmyappearmyappear')
  if (!win) {
    if (typeof window !== 'undefined') {
      win = window;
    } else {
      return;
    }
  }
  createIntersectionObserver(options);
  return injectEventListenerHook([], win.Node);
}

const defaultOptions = {
  root: null,
  rootMargin: '0px',//视窗范围影响参数
  threshold: generateThreshold(10)
};

export function createIntersectionObserver(options = defaultOptions) {
  options={...defaultOptions,...options}
  intersectionObserver = new IntersectionObserver(handleIntersect, options);
}

由于我进行优化的页面为多页面应用中的一个页面,并且只有图片懒加载用到了appear-polyfill,所以暂时这么操作,感觉后续rax-picture可以考虑做一个lazyloadThreshold参数,每个图片可以定义自己的懒加载距离阈值。

@MrpandaLiu
Copy link
Contributor

fix

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants