ember-skeleton
v0.0.3
Published
Show fast-loading temporary images in place of an eventual slow-loading image
Downloads
6
Readme
Ember skeleton
About
Show fast-loading temporary images in place of an eventual slow-loading image.
Browser Compatability
This library relies on addEventListener
and removeEventListener
which is
IE9+
Building yourself
npm install && bower install
ember build
The builds will be in the dist/
directory.
Installing
ember install ember-skeleton
Looking for help?
If it is a bug please open an issue on GitHub.
Usage
Use the component in your templates:
{{skeleton-img src="/path/to/large/image.png" tmpSrc="/path/to/small/placeholder.png"}}
The workflow is thus:
- The
tmpSrc
image will be loaded first - Once complete the
src
image will attempt to load - If the
src
completes successfully it will be displayed - If the
src
does not complete successfully thetmpSrc
will stay - If an optional
errorSrc
is provided that image will be displayed in the even ofsrc
not completing successfully.
Error Example
{{skeleton-img src="/path/to/invalid/large/image.png" tmpSrc="/path/to/small/placeholder.png" errorSrc="/path/to/error/placeholder.png"}}
Setting Defaults
If you'd like to set defaults instead of having to manually set tmpSrc
and errorSrc
for each use of {{skeleton-img}}
you can overwrite the
component in app/components/skeleton-img.js
import SkeletonImg from 'ember-skeleton/components/skeleton-img';
export default SkeletonImg.extend({
tmpSrc: "/default/path/to/placeholder.png",
errorSrc: "/default/path/to/error/placeholder.png"
});
Now you can do:
{{skeleton-img src="/path/to/large/image.png"}}
You can still override the defaults by passing those values into the component from within the template.
Styling
The component itself produced an img
tag with a skeleton-img
class.
The follow state-based classes are also available:
loading
used when thesrc
image is still loadingloaded
used whensrc
has successfully completedload-error
used ifsrc
has not succesfully completed
Because the slow-loading images will likely be a different size than the
placeholders it is recommended that you normalize the img
tag's
dimensions:
.skeleton-img {
width: 300px;
height: 300px;
}
This example will ensure that the when src
swaps our with tmpSrc
that there isn't any chnages in dimensions. This of course is optional
and the values should change based upon your needs.
Authors
We are very thankful for the many contributors
Versioning
This library follows Semantic Versioning
Want to help?
Please do! We are always looking to improve this library. Please see our Contribution Guidelines on how to properly submit issues and pull requests.
Legal
DockYard, Inc © 2015