<div class="lazy-image" style="width: {{width}}px; height: {{height}}px; background: {{background}};"> {{#if displaySrc}} <img class="{{hidden ? 'hidden' : ''}} {{className || ''}}" aria-hidden="{{ariaHidden || ''}}" alt="{{alt || ''}}" src="{{displaySrc}}" :width :height /> {{/if}} </div> <style> .lazy-image { overflow: hidden; } .lazy-image img { transition: opacity 0.2s linear; } </style> <script> import { mark, stop } from '../_utils/marks' export default { oncreate() { mark('LazyImage oncreate()') let img = new Image() let src = this.get('src') let fallback = this.get('fallback') img.onload = () => { requestAnimationFrame(() => { this.set({ displaySrc: src, hidden: true }) requestAnimationFrame(() => { this.set({hidden: false}) }) }) } img.onerror = () => { this.set({displaySrc: fallback}) } img.src = src stop('LazyImage oncreate()') } } </script>