Angular Image Preloader

Asynchronous Image Preloader Directive for Angular 1.X.

Why?

Images load syncronously. The only problem is that they are render blocking and browsers only let you do limited concurrent requests to specific domains (See this). I made this AngularJS directive to get around this issue on projects that servers large datasets of images from different domains, like the project this was built for.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See usage for notes on how to use the project on a live project.

Prerequisites

AngularJS 1.X

Installing

Install it with NPM, Bower or Yarn:

npm install --save angular-image-preloader
bower install --save angular-image-preloader
yarn add angular-image-preloader

After installed and imported to the project, you should be able to load the module like so:

angular.module('your-module', ['angular-image-preloader']);

Using

Asynchronously loading images with img:

<img preload-image ng-src="your-image.jpg"
     default-image="a-default-image.jpg"
     fallback-image="a-fallback-image.jpg" />

Asynchronously loading background images with CSS:

<div preload-bg-image="your-image.jpg"
     default-image="a-default-image.jpg"
     fallback-image="a-fallback-image.jpg"></div>

Built With

• Angular 1.X - The web framework this was built for
• Webpack 2 - Package Bundler

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Rafael Fragoso - Initial work - rafaelfragosom

See also the list of contributors who participated in this project.

TODO

• Tests

License

This project is licensed under the MIT License - see the LICENSE file for details