A simple AngularJS module to make it easy to pre-load images

Angular Core Dependency: ~1.3.10

Module License: MIT

Added by: Sam Deering





Stars: 71

Watchers: 71

Forks: 30


Leon Revill
Leon Revill

Module Description


A simple AngularJS module to make it easy to pre-load images to prevent the horrible waterfall effect: Demo.


##Install with bower

bower install angular-preload-image

##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']);


##Pre-load background images

<div preload-bg-image="[URL]" default-image="[URL]" fallback-image="[URL]"></div>

##Pre-load standard images

<img preload-image ng-src="[URL]" default-image="[URL]" fallback-image="[URL]" />




Check out the demo for an example of pre-loading background images and pre-loading standard images with AngularJS.


  • Ability to know when all pre-loaded images have finished loading within the page
  • Extensive cross browser and device testing + fixes


Inspiration taken from Ben Nadel's post about pre-loading images.

Module stats last updated: 2017-12-06 15:00:04

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!