https://github.com/huafu/ember-img-cache
DEPRECATED - use this instead: https://github.com/huafu/ember-img-manager
https://github.com/huafu/ember-img-cache
Last synced: 3 months ago
JSON representation
DEPRECATED - use this instead: https://github.com/huafu/ember-img-manager
- Host: GitHub
- URL: https://github.com/huafu/ember-img-cache
- Owner: huafu
- Created: 2014-10-27T06:05:51.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-31T13:16:21.000Z (over 8 years ago)
- Last Synced: 2025-01-18T09:22:31.195Z (5 months ago)
- Language: JavaScript
- Homepage: https://github.com/huafu/ember-img-manager
- Size: 169 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ember-img-cache [](https://travis-ci.org/huafu/ember-img-cache)
# DEPRECATED, use [ember-img-manager](https://github.com/huafu/ember-img-manager) instead!
Never saw some images already loaded by your Ember app re-loading again? Well this addon includes
an `{{img}}` Handlebars helper that will clone images and keep a cache of the nodes, re-cloning the
clone any time later that the application needs that image again, resulting in traffic cut-down
as the browser does not try to download the image again then.
As well as caching images, it allow you to have different styles for each `loading`/`success`/`error`
state of an image. Any loading image will be added the `-eic-loading` css class. Once loaded, this
class is removed and `-eic-success` class is added. If it couldn't load the image, the `-eic-error`
class is added instead. **Notice the prefixing dash (`-`)**
## Installation
* `npm install --save-dev ember-img-cache`
* Then in your templates instead of using `
`, use the `{{img}}` Handlebars template:
```handlebars
{{! ... }}
Click here {{img 'assets/images/save.png' alt='Save' title='Save'}} to save!
{{! ... }}
```
## How it works
1. When you call `{{img}}` with a given `src`, if that `src` isn't falsy and isn't starting
with `data:` or `file:`, a new template node will be created in the cache if there isn't already.
A placeholder `![]()
` tag with all same attributes except an empty `src` will be inserted into the DOM.
2. Once in the `afterRender` Ember's queue, that placeholder `![]()
` node will be replaced with a clone
of the cached `![]()
`, taking care of copying attributes. **That way the browser will NOT re-download
the image, while if it parses it in some HTML it'd re-download that image.**
## Authors
*  [Huafu Gandon](https://github.com/huafu)