{"id":15380752,"url":"https://github.com/bitstarr/loadatsight","last_synced_at":"2025-04-13T09:17:53.205Z","repository":{"id":22246899,"uuid":"25580380","full_name":"bitstarr/loadAtSight","owner":"bitstarr","description":"Load AJAX content if an element is visible or becomes visible (depending on an event).","archived":false,"fork":false,"pushed_at":"2014-10-23T13:06:01.000Z","size":148,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T09:17:52.035Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bitstarr.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":"2014-10-22T12:32:53.000Z","updated_at":"2014-10-22T12:37:15.000Z","dependencies_parsed_at":"2022-08-20T10:50:30.920Z","dependency_job_id":null,"html_url":"https://github.com/bitstarr/loadAtSight","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitstarr%2FloadAtSight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitstarr%2FloadAtSight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitstarr%2FloadAtSight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitstarr%2FloadAtSight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitstarr","download_url":"https://codeload.github.com/bitstarr/loadAtSight/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688552,"owners_count":21145766,"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","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":[],"created_at":"2024-10-01T14:24:31.102Z","updated_at":"2025-04-13T09:17:53.177Z","avatar_url":"https://github.com/bitstarr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LoadAtSight\r\n\r\nLoad AJAX content if an element is visible or becomes visible (depending on an event).\r\n\r\nA little bit code is taken from [Ajax-include pattern](https://github.com/filamentgroup/Ajax-Include-Pattern/).\r\n\r\n## Context\r\nYou build a responsive website and want to load secondary information (sidebars, etc.) when they are really needed.\r\n\r\nLet's think about a mobile first responsive website:\r\n * There is a box that you won't show on small screens.\r\n * The user turns its device or uses a mid sized screen.\r\n * Now there is enough space for this box.\r\n * Because you like performance, you don't load the content of the box for every user.\r\n * Instead you load it when the box is (or becomes) visible.\r\n\r\nSo you initial page load is less and you don't need to load bits you won't use on small screens. Great, isn't it?\r\n\r\n## Usage\r\n    \u003cdiv class=\"box\"\u003e\r\n        \u003cdiv class=\"offers\"\u003e\r\n            \u003cul\u003e\r\n                [sweet offers]\r\n            \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n        \u003caside class=\"benefits js-loadatsight\" data-append=\"pages/benefits.html\"\u003e\r\n        \u003c/aside\u003e\r\n    \u003c/div\u003e\r\n\r\n    .offers { width: 100%; }\r\n    .benefits { display: none; width: 30%; }\r\n    @media only screen and (min-width: 50em) {\r\n        .offers,\r\n        .benefits { display: table-cell; }\r\n        .offers { width: 70%; }\r\n    }\r\n\r\n    $('.js-loadatsight').loadAtSight();\r\n\r\n## Bower Installation\r\n    bower install load-at-sight\r\n\r\n## Options\r\n### windowEvents\r\nOn which events of the `window` object should we react.\r\n\r\ndefault: `load`\r\n\r\n### loadingClass\r\nThe element will get a CSS class to while the AJAX request runs.\r\n\r\ndefault: `is-loading`\r\n\r\n## On reszing\r\nAs you might know could it be a performance issue to use the plain resize event. I prefer a custom event which delays a certain time so there will be no fireworks.\r\n\r\nFor example a technique as Matt Perry mentions [in a comment at CSS-Tricks](http://css-tricks.com/snippets/jquery/done-resizing-event/#comment-1585739).\r\n\r\n    $('.js-loadatsight').loadAtSight({\r\n        windowEvents: 'load calmresize'\r\n    });\r\n\r\n## Licence\r\nMIT\r\n\r\n## Thoughts\r\n\r\nYou could also use [Ajax-include pattern](https://github.com/filamentgroup/Ajax-Include-Pattern/) in combination with [bindWithDelay](https://github.com/bgrins/bindWithDelay/) but i preferred to use less code for this particular job.\r\n\r\nThis plugin is no a jack of all trades. Its usage ist bound to a well definded case - to load two or three boxes on demand. Feel free to spin this idea forward and fork the project.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitstarr%2Floadatsight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitstarr%2Floadatsight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitstarr%2Floadatsight/lists"}