{"id":20485433,"url":"https://github.com/modularorg/modularload","last_synced_at":"2025-07-30T01:05:54.675Z","repository":{"id":47542072,"uuid":"173620901","full_name":"modularorg/modularload","owner":"modularorg","description":"□ Dead simple page transitions and lazy loading.","archived":false,"fork":false,"pushed_at":"2021-08-24T18:45:47.000Z","size":35,"stargazers_count":128,"open_issues_count":1,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-05T05:17:14.526Z","etag":null,"topics":["fetch","javascript","lazy-loading","page-transitions","pjax","pushstate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/modularorg.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-03T19:36:43.000Z","updated_at":"2025-05-16T12:53:37.000Z","dependencies_parsed_at":"2022-09-26T16:21:52.443Z","dependency_job_id":null,"html_url":"https://github.com/modularorg/modularload","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/modularorg/modularload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modularorg","download_url":"https://codeload.github.com/modularorg/modularload/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularload/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267790709,"owners_count":24144889,"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-07-29T02:00:12.549Z","response_time":2574,"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":["fetch","javascript","lazy-loading","page-transitions","pjax","pushstate"],"created_at":"2024-11-15T16:30:22.718Z","updated_at":"2025-07-30T01:05:54.627Z","avatar_url":"https://github.com/modularorg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/modularbp/modular-boilerplate\"\u003e\n        \u003cimg src=\"https://user-images.githubusercontent.com/4596862/37635200-aa3271b2-2bd0-11e8-8a65-9cafa0addd67.png\" height=\"140\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003emodularLoad\u003c/h1\u003e\n\u003cp align=\"center\"\u003eDead simple page transitions and lazy loading.\u003c/p\u003e\n\n## Installation\n```sh\nnpm install modularload\n```\n\n## Why\n- Simple\n- Lightweight\n- Minimal configuration\n- No dependencies\n\n## Usage\n```js\nimport modularLoad from 'modularload';\n\nthis.load = new modularLoad({\n    enterDelay: 300\n});\n```\n```html\n\u003cdiv data-load-container\u003e\n    \u003ch1\u003eHello\u003c/h1\u003e\n    \u003ca href=\"/blog\"\u003eRead more\u003c/a\u003e\n\u003c/div\u003e\n```\n\n#### With custom transitions\n```js\nimport modularLoad from 'modularload';\n\nthis.load = new modularLoad({\n    enterDelay: 300,\n    transitions: {\n        transitionName: {\n            enterDelay: 450\n        },\n        transitionTwoName: {\n            enterDelay: 600\n        }\n    }\n});\n```\n```html\n\u003chtml data-page=\"home\"\u003e\n   \u003cbody\u003e \n        \u003cnav\u003e\n            \u003ca href=\"/contact\" data-load=\"transitionName\"\u003eContact\u003c/a\u003e\n        \u003c/nav\u003e\n        \u003cdiv data-load-container\u003e\n            \u003ch1\u003eHello\u003c/h1\u003e\n            \u003ca href=\"/blog\" data-load=\"transitionTwoName\"\u003eRead more\u003c/a\u003e\n        \u003c/div\u003e\n   \u003c/body\u003e\n\u003c/html\u003e \n```\n\n#### With custom container\n```js\nimport modularLoad from 'modularload';\n\nthis.load = new modularLoad({\n    enterDelay: 600,\n    transitions: {\n        article: {\n            enterDelay: 300\n        }\n    }\n});\n```\n```html\n\u003cdiv data-load-container\u003e\n    \u003cdiv data-load-container=\"article\"\u003e\n        \u003ch1\u003eArticle One\u003c/h1\u003e\n        \u003cp\u003eText\u003c/p\u003e  \n    \u003c/div\u003e\n    \u003ca href=\"/blog/article-one\" data-load=\"article\"\u003eArticle One\u003c/a\u003e \n    \u003ca href=\"/blog/article-two\" data-load=\"article\"\u003eArticle Two\u003c/a\u003e \n\u003c/div\u003e\n```\n\n#### With lazy images\n```js\nimport modularLoad from 'modularload';\n\nthis.load = new modularLoad();\n```\n```html\n\u003cdiv data-load-container\u003e\n    \u003cheader data-load-style=\"background-image: url('images/header.jpg');\"\u003e\n        \u003ch1\u003eHello\u003c/h1\u003e\n    \u003c/header\u003e\n    \u003cmain\u003e\n        \u003cimg data-load-src=\"images/img.jpg\"\u003e\n        \u003ca href=\"/blog\"\u003eRead more\u003c/a\u003e\n    \u003c/main\u003e\n\u003c/div\u003e \n```\n\n#### With events\n```js\nimport modularLoad from 'modularload';\n\nthis.load = new modularLoad();\n\nthis.load.on('loaded', (transition, oldContainer, newContainer) =\u003e {\n    console.log('👌');\n\n    if (transition == 'transitionName') {\n        console.log('🤙');\n    }\n});\n```\n\n#### With methods\n```js\nimport modularLoad from 'modularload';\n\nthis.load = new modularLoad();\n\nthis.load.goTo('/page', 'transitionName');\n```\n\n## Options\n| Option | Type | Default | Description |\n| ------ | ---- | ------- | ----------- |\n| `name` | `string` | `'load'` | Data attributes name |\n| `loadingClass` | `string` | `'is-loading'` | Class when a link is clicked. |\n| `loadedClass` | `string` | `'is-loaded'` | Class when the new container enters. |\n| `readyClass` | `string` | `'is-ready'` | Class when the old container exits. |\n| `transitionsPrefix` | `string` | `'is-'` | Custom transitions class prefix. |\n| `transitionsHistory` | `boolean` | `true` | Redo the custom transitions while using the back button. |\n| `enterDelay` | `number` | `0` | Minimum delay before the new container enters. |\n| `exitDelay` | `number` | `0` | Delay before the old container exists after the new enters. |\n| `loadedDelay` | `number` | `0` | Delay before adding the loaded class. For example, to wait for your JS DOM updates. |\n| `transitions` | `object` | `{}` | Custom transitions options. |\n\n## Attributes\n| Attribute | Values | Description |\n| --------- | ------ | ----------- |\n| `data-load-container` | ` `, `string` | Container you want to load with optional string. |\n| `data-load` | `string`, `false` | Transition name or disable transition. |\n| `data-load-url` | `boolean` | Update url without loading container. |\n| `data-load-src` | `string` | Lazy load src attribute. |\n| `data-load-srcset` | `string` | Lazy load srcset attribute. |\n| `data-load-style` | `string` | Lazy load style attribute. |\n| `data-load-href` | `string` | Lazy load href attribute. |\n\n## Events\n| Event | Arguments | Description |\n| ----- | --------- | ----------- |\n| `loading` | `transition`, `oldContainer` | On link click. |\n| `loaded` | `transition`, `oldContainer`, `newContainer` | On new container enter. |\n| `ready` | `transition`, `newContainer` | On old container exit. |\n| `images` | | On all images load. |\n\n## Methods\n| Method | Description |\n| ------ | ----------- |\n| `goTo('href'[, 'transition'][, true])` | Go to href. With optional transition name and boolean for url update only. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodularorg%2Fmodularload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodularorg%2Fmodularload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodularorg%2Fmodularload/lists"}