<polymer-element name="unresolved-img" attributes="src">

<template>
<style>
img{
	display: block;	
	transition: opacity ease-in 0.2s;
}
[unresolved] {
    opacity: 0;
}
</style>
<img id="displayImage" unresolved src class="card"></img>
</template>
<script>
    Polymer('unresolved-img', {
		created: function(){
			this.loadingImage = new Image();
		},
		ready: function(){
		},
		srcChanged: function() {
			this.$.displayImage.setAttribute('unresolved', '');
			this.loadingImage.targetImage = this.$.displayImage;
			this.loadingImage.onload = function() { 
				this.targetImage.src = this.src;
				this.targetImage.removeAttribute('unresolved');
			};
			this.loadingImage.src = this.src;
		}
    });
  </script>
<polymer-element>
Create custom image element that waits for image load
Create custom image element that waits for image load
