improve perf of loading avatars

This commit is contained in:
Nolan Lawson 2018-01-20 21:06:30 -08:00
parent 67f2e6241d
commit f48aa23fcd
2 changed files with 18 additions and 20 deletions

View file

@ -1,15 +1,11 @@
{{#await imagePromise}}
<img class="{{className}} avatar" aria-hidden="true" alt=""
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
{{then src}}
<img class="{{className}} avatar" aria-hidden="true" alt=""
src="{{account.avatar}}" />
{{catch error}}
{{#if error}}
<svg class="{{className}} avatar" aria-hidden="true">
<use xlink:href="#fa-user" />
</svg>
{{/await}}
{{else}}
<img class="{{className}} avatar" aria-hidden="true" alt=""
src="{{account.avatar}}" on:loadError="set({error: true})" />
{{/if}}
<style>
.avatar {
width: 48px;
@ -23,14 +19,16 @@
</style>
<script>
export default {
computed: {
imageSrc: (account) => account.avatar,
imagePromise: (imageSrc) => new Promise((resolve, reject) => {
let img = new Image()
img.onload = resolve
img.onerror = reject
img.src = imageSrc
})
events: {
loadError (node, callback) {
node.addEventListener('error', callback)
return {
teardown () {
node.removeEventListener('error', callback)
}
}
},
}
}
</script>

View file

@ -52,13 +52,13 @@
leading: true,
trailing: true
})
node.addEventListener('scroll', onScroll);
node.addEventListener('scroll', onScroll)
return {
teardown() {
node.removeEventListener('scroll', onScroll);
node.removeEventListener('scroll', onScroll)
}
};
}
},
fullscreen(node, callback) {
const onFullscreen = (() => {