{"id":24518537,"url":"https://github.com/dperrymorrow/defer-images","last_synced_at":"2025-03-15T11:12:47.991Z","repository":{"id":26852673,"uuid":"30312526","full_name":"dperrymorrow/defer-images","owner":"dperrymorrow","description":"defers image loading until images are in the view, background loads more images when idle","archived":false,"fork":false,"pushed_at":"2015-04-24T05:40:39.000Z","size":364,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T01:42:59.770Z","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/dperrymorrow.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":"2015-02-04T17:51:16.000Z","updated_at":"2015-04-24T05:39:47.000Z","dependencies_parsed_at":"2022-07-25T16:48:07.100Z","dependency_job_id":null,"html_url":"https://github.com/dperrymorrow/defer-images","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/dperrymorrow%2Fdefer-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dperrymorrow%2Fdefer-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dperrymorrow%2Fdefer-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dperrymorrow%2Fdefer-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dperrymorrow","download_url":"https://codeload.github.com/dperrymorrow/defer-images/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719398,"owners_count":20336607,"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":"2025-01-22T01:43:09.275Z","updated_at":"2025-03-15T11:12:47.964Z","avatar_url":"https://github.com/dperrymorrow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# defer-images\n\ndefers image loading until images are in the view, background loads more images when idle.\n\u003e\u003e [Example here:](http://dperrymorrow.github.io/defer-images/examples/)\n\n## Usage\n\nChange your html so that it has a placeholder instead of the real image you wish to defer loading on.\nBe sure to include width and height so that it will take up the space that it will eventually occupy.\n\n```html\n\u003cimg src=\"placeholder.gif\" onload=\"defer.add(this);\"\ndata-src=\"http://example.com/real-image.gif\" width=\"100\" height=\"50\"\u003e\n```\n\nThe load handler will register the image with the defer module.\nThis will trigger on the load of the placeholder image, and immediately begin determining if it is in the viewport.\n\nOr if ```onload``` handlers are not your thing, add it directly with javascript on the page after its been added to the DOM.\n\n```javascript\nvar img = document.getElementById([id]);\ndefer.add(img);\n```\n\n## Building and running the tests\n\nInstall grunt and karma cli so you can interact with them on the command line\n\n```bash\n$ npm install grunt-cli -g\n$ npm install karma-cli -g\n```\n\nNext install required packages for defer-images\n\n```bash\ncd defer-images\n$ npm install\n```\nNow you can run the test suite or build the project.\n\nTo build __(minifiy and create source map)__\n\n```bash\n$ grunt uglify\n```\n\nto jsLint the project\n```bash\n$ grunt\n```\n\nTo run the tests\n```bash\n$ karma start\n```\n\nYou will see output like the following\n```\n$ karma start\nINFO [karma]: Karma v0.12.31 server started at http://localhost:9876/\nINFO [launcher]: Starting browser PhantomJS\nINFO [PhantomJS 1.9.8 (Mac OS X)]: Connected on socket nBbW5jL6-B08r6AV_5JA with id 96072712\nPhantomJS 1.9.8 (Mac OS X): Executed 26 of 26 SUCCESS (0.011 secs / 0.008 secs)\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdperrymorrow%2Fdefer-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdperrymorrow%2Fdefer-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdperrymorrow%2Fdefer-images/lists"}