We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
最近在做性能优化的事情,其中有关于图片懒加载这一块的事情,目前依赖于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参数,每个图片可以定义自己的懒加载距离阈值。
The text was updated successfully, but these errors were encountered:
fix
Sorry, something went wrong.
No branches or pull requests
最近在做性能优化的事情,其中有关于图片懒加载这一块的事情,目前依赖于rax-picture组件提供的懒加载能力,但是rax-picture依赖于appear-polyfill,只提供了进入屏幕视窗才进行加载,这样的话有损用户体验,所以想做一个有个距离阈值的懒加载,距离屏幕一定距离的时候就开始加载图片。目前想要先开放appear-polyfill的自定义视窗的能力。
具体修改可以参考下面的代码
由于我进行优化的页面为多页面应用中的一个页面,并且只有图片懒加载用到了appear-polyfill,所以暂时这么操作,感觉后续rax-picture可以考虑做一个lazyloadThreshold参数,每个图片可以定义自己的懒加载距离阈值。
The text was updated successfully, but these errors were encountered: