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

View file

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