#angular-preload-image
A simple AngularJS module to make it easy to pre-load images to prevent the horrible waterfall effect: Demo.
#Installation
##Install with bower
This repo is not in the Bower registry since it's a fork, but you can still pull this github url directly with bower.
"dependencies": {
"angular-preload-image": "git@github.com:mcwebb/angular-preload-image.git"
}
##Include script files
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-preload-image/angular-preload-image.min.js"></script>
##Add module dependency
angular.module('app', ['angular-preload-image']);
#Usage
##Pre-load background images
<div preload-bg-image="[URL]" default-image="[URL]" fallback-image="[URL]"></div>
##Pre-load standard images
<img preload-image primary-src="[URL]" default-image="[URL]" fallback-image="[URL]" />
#Licence
MIT
#Demo
Check out the demo for an example of pre-loading background images and pre-loading standard images with AngularJS.
#TO DO
- Ability to know when all pre-loaded images have finished loading within the page
- Extensive cross browser and device testing + fixes
#Credit
Inspiration taken from Ben Nadel's post about pre-loading images.