npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-skeleton

v0.0.3

Published

Show fast-loading temporary images in place of an eventual slow-loading image

Downloads

6

Readme

Ember skeleton

Build Status

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:

  1. The tmpSrc image will be loaded first
  2. Once complete the src image will attempt to load
  3. If the src completes successfully it will be displayed
  4. If the src does not complete successfully the tmpSrc will stay
  5. If an optional errorSrc is provided that image will be displayed in the even of src 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 the src image is still loading
  • loaded used when src has successfully completed
  • load-error used if src 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

@dockyard

Licensed under the MIT license