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

• Changelog
  • Dependency
• Usage
  • Include module
  • Use it
• About listeners
• Data prefixes
• Angular 1.3+

• 1.5 extracted the factory into a provider, so you can set an offset to preload images

app.config(['ImgSrcOndemandProvider', function(ImgSrcOndemandProvider) {
  ImgSrcOndemandProvider.offset(500);
}]);

More details can be found at #1

• 1.4 added .update onto the service so image status check can be called programmatically

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.

angular.module('your-module', ['img-src-ondemand']);

<img src-ondemand="/abc.png" alt="plain text">
<img src-ondemand="{{myImage.url}}" alt="interpolation">

<ul>
  <li ng-repeat="image in images">
    <img src-ondemand="{{image.url}}" alt="within ng-repeat">
  </li>
<ul>

or

<ul>
  <li ng-repeat="image in images">
    <img src-var-ondemand="image.url" alt="with a variable">
  </li>
</ul>

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.

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.

The followings are legit when using AngularJS 1.3+

<img src-ondemand="{{::image.url}}" alt="interpolate once">
<img src-var-ondemand="::image.url" alt="bind once">