{"id":17256609,"url":"https://github.com/princemaple/img-src-ondemand","last_synced_at":"2025-03-22T18:34:26.937Z","repository":{"id":25063488,"uuid":"28483658","full_name":"princemaple/img-src-ondemand","owner":"princemaple","description":"This is an Angular module that delays image loading to when it appears on the screen","archived":false,"fork":false,"pushed_at":"2023-06-05T06:44:32.000Z","size":25,"stargazers_count":25,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-17T20:13:30.082Z","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/princemaple.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-12-25T14:33:35.000Z","updated_at":"2016-01-23T01:58:31.000Z","dependencies_parsed_at":"2024-10-28T14:25:59.873Z","dependency_job_id":"514babb1-f951-44ec-b723-c3aac835b4f0","html_url":"https://github.com/princemaple/img-src-ondemand","commit_stats":{"total_commits":45,"total_committers":3,"mean_commits":15.0,"dds":"0.15555555555555556","last_synced_commit":"13fd743e00f1acfe6157e320fb49e39c83a18710"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fimg-src-ondemand","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fimg-src-ondemand/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fimg-src-ondemand/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princemaple%2Fimg-src-ondemand/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/princemaple","download_url":"https://codeload.github.com/princemaple/img-src-ondemand/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245003617,"owners_count":20545638,"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-15T07:14:51.096Z","updated_at":"2025-03-22T18:34:26.609Z","avatar_url":"https://github.com/princemaple.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# img-src-ondemand\n\n## :warning: I wrote a replacement for this module some time ago, [Scroll Trigger](https://github.com/princemaple/scroll-trigger), the new one not only covers all the functionality `img-src-ondemand` provides, it also gives you way more. Hence, this module is no longer maintained, please migrate to `scroll-trigger` (easy, see [this test]( https://github.com/princemaple/scroll-trigger/blob/master/test/test_img_src_ondemand.html))\n\nAngular module that delays image loading to when it is about to appear on the screen.\n\nTo be more specific, it sets the `src` attribute on `img` tags just before you scroll\ndown to make it appear on the screen.\n\n[View demo](http://plnkr.co/edit/jUswgyfUneWdnFVQjo4q?p=preview)\n\n\n## Contents list\n\n\u003c!-- MarkdownTOC depth=0 --\u003e\n\n- [Changelog](#changelog)\n    - [Dependency](#dependency)\n- [Usage](#usage)\n    - [Include module](#include-module)\n    - [Use it](#use-it)\n- [About listeners](#about-listeners)\n- [Data prefixes](#data-prefixes)\n- [Angular 1.3+](#angular-13)\n\n\u003c!-- /MarkdownTOC --\u003e\n\n## Changelog\n\n* 1.5 extracted the factory into a provider, so you can set an offset to preload images\n\n```js\napp.config(['ImgSrcOndemandProvider', function(ImgSrcOndemandProvider) {\n  ImgSrcOndemandProvider.offset(500);\n}]);\n```\n\nMore details can be found at [#1](https://github.com/princemaple/img-src-ondemand/issues/1)\n\n* 1.4 added `.update` onto the service so image status check can be called programmatically\n\n### Dependency\n\nStarting from 1.3, `angular` is the only dependency of this package.\nIt used to require `jQuery` and `lodash` in `\u003c1.3`.\nI do plan to have them as optional dependency though, to allow IE8 support.\n\n## Usage\n\n### Include module\n\n```js\nangular.module('your-module', ['img-src-ondemand']);\n```\n\n### Use it\n\n```html\n\u003cimg src-ondemand=\"/abc.png\" alt=\"plain text\"\u003e\n\u003cimg src-ondemand=\"{{myImage.url}}\" alt=\"interpolation\"\u003e\n\n\u003cul\u003e\n  \u003cli ng-repeat=\"image in images\"\u003e\n    \u003cimg src-ondemand=\"{{image.url}}\" alt=\"within ng-repeat\"\u003e\n  \u003c/li\u003e\n\u003cul\u003e\n```\n\n**or**\n\n```html\n\u003cul\u003e\n  \u003cli ng-repeat=\"image in images\"\u003e\n    \u003cimg src-var-ondemand=\"image.url\" alt=\"with a variable\"\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## About listeners\n\n\u003e Even though angular mutates the attribute value when `image.url` changes,\nthe `src` attribute on the image will not change. This module was purely written\nfor loading images ondemand.\n\n## Data prefixes\n\nYou can prefix the attribute with `data-` (i.e. `data-src-ondemand`) if you think\nyou will change to use another framework and ditch Angular in the future. Chances\nare you will not use the same API, but if you do, you can look for this data attribute.\n\n## Angular 1.3+\n\n*The followings are legit when using AngularJS 1.3+*\n\n```html\n\u003cimg src-ondemand=\"{{::image.url}}\" alt=\"interpolate once\"\u003e\n\u003cimg src-var-ondemand=\"::image.url\" alt=\"bind once\"\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprincemaple%2Fimg-src-ondemand","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprincemaple%2Fimg-src-ondemand","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprincemaple%2Fimg-src-ondemand/lists"}