{"id":15541920,"url":"https://github.com/snewcomer/intersection-observer-admin","last_synced_at":"2025-08-22T07:43:51.670Z","repository":{"id":33423487,"uuid":"158101341","full_name":"snewcomer/intersection-observer-admin","owner":"snewcomer","description":"Intersection Observer Admin for better performance","archived":false,"fork":false,"pushed_at":"2025-07-21T23:26:10.000Z","size":561,"stargazers_count":40,"open_issues_count":4,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-02T11:53:39.384Z","etag":null,"topics":["intersection-observer","intersectionobserver-api","lazy-loading","lazyload-images","performance"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/snewcomer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-18T16:03:56.000Z","updated_at":"2025-06-07T20:25:13.000Z","dependencies_parsed_at":"2024-06-18T15:46:29.191Z","dependency_job_id":"2e3a3db4-59b2-4136-bb9f-501e3888f24d","html_url":"https://github.com/snewcomer/intersection-observer-admin","commit_stats":{"total_commits":81,"total_committers":6,"mean_commits":13.5,"dds":"0.40740740740740744","last_synced_commit":"fe89c8c998b6ab8ef86f829542f3f3b844156495"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/snewcomer/intersection-observer-admin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snewcomer%2Fintersection-observer-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snewcomer%2Fintersection-observer-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snewcomer%2Fintersection-observer-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snewcomer%2Fintersection-observer-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snewcomer","download_url":"https://codeload.github.com/snewcomer/intersection-observer-admin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snewcomer%2Fintersection-observer-admin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271606251,"owners_count":24788970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["intersection-observer","intersectionobserver-api","lazy-loading","lazyload-images","performance"],"created_at":"2024-10-02T12:20:02.268Z","updated_at":"2025-08-22T07:43:51.622Z","avatar_url":"https://github.com/snewcomer.png","language":"TypeScript","readme":"intersection-observer-admin\n==============================================================================\n![Download count all time](https://img.shields.io/npm/dt/intersection-observer-admin.svg)\n[![npm version](https://badge.fury.io/js/intersection-observer-admin.svg)](http://badge.fury.io/js/intersection-observer-admin)\n\nWhy use an administrator to manage all the elements on my page?\n------------------------------------------------------------------------------\nThis library is used in [ember-in-viewport](https://github.com/DockYard/ember-in-viewport) and [ember-infinity](https://github.com/ember-infinity/ember-infinity).  This library is particularly important for re-using the IntersectionObserver API.\n\nMost implementations have one Intersection Observer for each target element or so called `sentinel`.  However, [IntersectionObserver.observe](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/observe) can observer multiple `sentinels`.  So this library will resuse the IntersectionObserver instance for another element on the page with the same set of observer options and root element.  This can dramatically improve performance for pages with lots of elements and observers.\n\n_Note: A companion library is also available for requestAnimationFrame: https://github.com/snewcomer/raf-pool_\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nnpm install intersection-observer-admin --save\n```\n\nUsage\n------------------------------------------------------------------------------\n## API\n\n1. element: DOM Node to observe\n2. enterCallback: Function\n    - callback function to perform logic in your own application\n3. exitCallback: Function\n    - callback function to perform when element is leaving the viewport\n4. observerOptions: Object\n    - list of options to pass to Intersection Observer constructor (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)\n\n```js\nimport IntersectionObserverAdmin from 'intersection-observer-admin';\n\nconst intersectionObserverAdmin = new IntersectionObserverAdmin();\n\n// Add callbacks that will be called when observer detects entering and leaving viewport\nintersectionObserverAdmin.addEnterCallback(element, enterCallback);\nintersectionObserverAdmin.addExitCallback(element, exitCallback);\n\n// add an element to static administrator with window as scrollable area\nintersectionObserverAdmin.observe(element, { root, rootMargin: '0px 0px 100px 0px', threshold: 0 });\n\n// add an element in a scrolling container\nintersectionObserverAdmin.observe(element, { root, rootMargin: '0px 0px 100px 0px', threshold: 0 });\n\n// Use in cleanup lifecycle hooks (if applicable) from the element being observed\nintersectionObserverAdmin.unobserve(element, observerOptions);\n\n// Use in cleanup lifecycle hooks of your application as a whole\n// This will remove the in memory data store holding onto all of the observers\nintersectionObserverAdmin.destroy();\n```\n\n[IntersectionObserver's Browser Support](https://platform-status.mozilla.org/)\n------------------------------------------------------------------------------\n### Out of the box\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eChrome\u003c/td\u003e\n        \u003ctd\u003e51 \u003csup\u003e[1]\u003c/sup\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eFirefox (Gecko)\u003c/td\u003e\n        \u003ctd\u003e55 \u003csup\u003e[2]\u003c/sup\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eMS Edge\u003c/td\u003e\n        \u003ctd\u003e15\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eInternet Explorer\u003c/td\u003e\n        \u003ctd\u003eNot supported\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eOpera \u003csup\u003e[1]\u003c/sup\u003e\u003c/td\u003e\n        \u003ctd\u003e38\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eSafari\u003c/td\u003e\n        \u003ctd\u003e12.1\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eChrome for Android\u003c/td\u003e\n        \u003ctd\u003e59\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eAndroid Browser\u003c/td\u003e\n        \u003ctd\u003e56\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eOpera Mobile\u003c/td\u003e\n        \u003ctd\u003e37\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n* [1] [Reportedly available](https://www.chromestatus.com/features/5695342691483648), it didn't trigger the events on initial load and lacks `isIntersecting` until later versions.\n* [2] This feature was implemented in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference `dom.IntersectionObserver.enabled`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnewcomer%2Fintersection-observer-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnewcomer%2Fintersection-observer-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnewcomer%2Fintersection-observer-admin/lists"}