Coder Social home page Coder Social logo

appear-polyfill's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

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 photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.