Skip to content

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

@kenny-shaw

Description

@kenny-shaw

最近在做性能优化的事情,其中有关于图片懒加载这一块的事情,目前依赖于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参数,每个图片可以定义自己的懒加载距离阈值。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions