img-src-ondemand

This is an Angular module that delays image loading to when it appears on the screen

Angular Core Dependency: > 1.2.0 < 2.0

Module License: MIT

Added by: Sam Deering

GitHub

Repository

princemaple/img-src-ondemand

Stats

Stars: 25

Watchers: 25

Forks: 3

Author

Po Chen
Po Chen

Module Description

img-src-ondemand Bower version

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

Contents list

Changelog

  • 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

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

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

Use it

<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>

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+

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

Module stats last updated: 2017-11-15 15:00:18

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!