Numbers Probably Matter

    ember-img-cache

    0.0.3 • Public • Published

    ember-img-cache Build Status

    DEPRECATED, use 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 <img src="..." ...>, use the {{img}} Handlebars template:

      <div>
        {{! ... }}
        
        Click here {{img 'assets/images/save.png' alt='Save' title='Save'}} to save!
        
        {{! ... }}
      </div>

    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 <img> 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 <img> node will be replaced with a clone of the cached <img>, 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

    Install

    npm i ember-img-cache

    DownloadsWeekly Downloads

    15

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • huafu