-
Notifications
You must be signed in to change notification settings - Fork 5
Open
Description
最近在做性能优化的事情,其中有关于图片懒加载这一块的事情,目前依赖于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参数,每个图片可以定义自己的懒加载距离阈值。
SoloJiang
Metadata
Metadata
Assignees
Labels
No labels