Cover art polymer element
This is an example of a Polymer Web Component that implements a square image placeholder with a list of images sources, so it loads the most suitable one depending on size and pixel density.
You just need to include the polymer platform and this element in the head of your html page.
Then, you can start using the
spotify-coverart element as any other HTML element
in your page. Set the
images property to an array of objects containing
url of the image, sorted by descending size:
Each coverart will run a timer periodically to monitor changes in the size of the component. In order to avoid this, use the attribute
Running the example
To launch the example, install the
spotify-coverart bower component:
$ bower install spotify-coverart
Then launch a web server:
$ ruby -run -e httpd . -p 5000 # "python -m SimpleHTTPServer 5000" will also do the trick
Then, you only need to navigate to
http://localhost:5000/spotify-coverart/demo.html from any modern browser. Note that you need to run the server from the parent folder, not from the
- Prevent loading a smaller image if a larger one is already in place.
- Replace a smaller version with a larger one in a smoother way, waiting for the one to be loaded.