https://github.com/princemaple/img-src-ondemand
This is an Angular module that delays image loading to when it appears on the screen
https://github.com/princemaple/img-src-ondemand
Last synced: about 1 year ago
JSON representation
This is an Angular module that delays image loading to when it appears on the screen
- Host: GitHub
- URL: https://github.com/princemaple/img-src-ondemand
- Owner: princemaple
- License: mit
- Created: 2014-12-25T14:33:35.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-06-05T06:44:32.000Z (about 3 years ago)
- Last Synced: 2025-03-17T20:13:30.082Z (about 1 year ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 25
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# img-src-ondemand
## :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))
Angular module that delays image loading to when it is about to appear on the screen.
To be more specific, it sets the `src` attribute on `img` tags just before you scroll
down to make it appear on the screen.
[View demo](http://plnkr.co/edit/jUswgyfUneWdnFVQjo4q?p=preview)
## Contents list
- [Changelog](#changelog)
- [Dependency](#dependency)
- [Usage](#usage)
- [Include module](#include-module)
- [Use it](#use-it)
- [About listeners](#about-listeners)
- [Data prefixes](#data-prefixes)
- [Angular 1.3+](#angular-13)
## Changelog
* 1.5 extracted the factory into a provider, so you can set an offset to preload images
```js
app.config(['ImgSrcOndemandProvider', function(ImgSrcOndemandProvider) {
ImgSrcOndemandProvider.offset(500);
}]);
```
More details can be found at [#1](https://github.com/princemaple/img-src-ondemand/issues/1)
* 1.4 added `.update` onto the service so image status check can be called programmatically
### Dependency
Starting from 1.3, `angular` is the only dependency of this package.
It used to require `jQuery` and `lodash` in `<1.3`.
I do plan to have them as optional dependency though, to allow IE8 support.
## Usage
### Include module
```js
angular.module('your-module', ['img-src-ondemand']);
```
### Use it
```html
![plain text]()
![interpolation]()
```
**or**
```html
```
## About listeners
> Even though angular mutates the attribute value when `image.url` changes,
the `src` attribute on the image will not change. This module was purely written
for loading images ondemand.
## Data prefixes
You can prefix the attribute with `data-` (i.e. `data-src-ondemand`) if you think
you will change to use another framework and ditch Angular in the future. Chances
are you will not use the same API, but if you do, you can look for this data attribute.
## Angular 1.3+
*The followings are legit when using AngularJS 1.3+*
```html
```