appear-polyfill's People
appear-polyfill's Issues
appear-polyfill是否可以开放自定义intersectionObserver视窗的能力?
最近在做性能优化的事情,其中有关于图片懒加载这一块的事情,目前依赖于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参数,每个图片可以定义自己的懒加载距离阈值。
支持延迟加载 appear-ployfill
发现很多地方都推荐直接在 html 中通过 script 外链加载,或者在应用入口 import appear-polyfill
如果客户端已经原生支持 IntersectionObserver,这个包也会额外载入 IntersectionObserver.js(22 kB not minified)
因为需要懒加载的图片对于首屏呈现都不是阻塞的,但是为了懒加载这部分图片,却需要同步地加载这个包,这点感觉不太合理
在我自己的一个工程里已经实现了延迟加载 appear-polyfill,可以将 appear-polyfill 从主包分割出去,而且会在 useEffect 里执行(不会阻塞首屏渲染),如果客户端原生支持 IntersectionObserver,也不会再引入额外的 polyfill 代码
用法类似
import useAppear from 'use-appear'
export default () => {
useAppear();
}
晚点看看是不是可以提个 PR
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.