ember-lazy-image

ember-lazy-image is a component that allows you to gracefully handle image loading.

Component will load images lazily, only if they appeared in the view port. This optimization brings page load time down.

Default loading placeholder is stolen from aurer and his awesome codepen.

npm install ember-lazy-image --save

{{lazy-image url='http://my-valid-url.com/foo.jpg'}}

Component will wait until the image is loaded and while waiting it will show default loading placeholder (seee above).

You can customize loading placeholder by passing it as an parameter:

{{#lazy-image url='http://my-valid-url.com/foo.jpg'}}
  <!-- custom template goes here, spinner, svg, etc. -->
{{/lazy-image}}

You can also define the fallback if the image failed to load. By default, component will render Image failed to load text.

You can customize error text by passing it as an parameter:

{{lazy-image url='http://my-not-valid-url.com/foo.jpg' errorText='Something went wrong.'}}

Installation

For more information on using ember-cli, visit http://www.ember-cli.com/.