this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

image loading... ;

12Me21 809ed3c2 04b27ae6

+33 -23
+33 -23
render.js
··· 43 43 44 44 let intersection_observer, preview 45 45 46 + const load_image = (e, src)=>{ 47 + const set_size = (state)=>{ 48 + e.width = e.naturalWidth 49 + e.height = e.naturalHeight 50 + e.dataset.state = state 51 + e.style.setProperty('--width', e.naturalWidth) 52 + e.style.setProperty('--height', e.naturalHeight) 53 + } 54 + e.src = src 55 + // check whether the image is "available" (i.e. size is known) by looking at naturalHeight 56 + // https://html.spec.whatwg.org/multipage/images.html#img-available 57 + // this will happen here if the image is VERY cached, i guess 58 + if (e.naturalHeight) 59 + set_size('loaded') 60 + else // otherwise wait for load 61 + e.decode().then(ok=>{ 62 + set_size('loaded') 63 + }, no=>{ 64 + e.dataset.state = 'error' 65 + }) 66 + } 67 + 46 68 let CREATE = { 47 69 __proto__: null, 48 70 ··· 82 104 }.bind(𐀶`<a href="" class='M-link'>`), 83 105 84 106 image: function({url, alt, width, height}) { 85 - let e = this.elem() 107 + let e = document.createElement('img') 108 + e.tabIndex = 0 109 + e.dataset.state = "loading" 110 + e.dataset.shrink = "" 111 + 86 112 let src = filter_url(url, 'image') 113 + 87 114 if (alt!=null) e.alt = e.title = alt 88 115 if (width) { 89 116 e.width = width ··· 92 119 if (height) { 93 120 e.height = height 94 121 e.style.setProperty('--height', height) 95 - e.dataset.state = 'size' 122 + e.dataset.state = 'loaded' 96 123 } 124 + 97 125 // loading maybe 98 - e.onerror = (event)=>{ 99 - event.target.dataset.state = 'error' 100 - } 101 - e.onload = (event)=>{ 102 - this.set_size(event.target, 'loaded') 103 - } 104 126 if (intersection_observer) { 105 127 e.dataset.src = src 106 128 intersection_observer.observe(e) 129 + intersection_observer._x_load = load_image//HACK 107 130 } else { 108 - e.src = src 131 + load_image(e, src) 109 132 } 110 - // check whether the image is "available" (i.e. size is known) 111 - // https://html.spec.whatwg.org/multipage/images.html#img-available 112 - if (e.naturalHeight) 113 - this.set_size(e, 'size') 114 133 return e 115 - }.bind({ 116 - elem: 𐀶`<img data-state=loading data-shrink tabindex=0>`, 117 - set_size: (e, state)=>{ 118 - e.height = e.naturalHeight 119 - e.width = e.naturalWidth 120 - e.dataset.state = state 121 - e.style.setProperty('--width', e.naturalWidth) 122 - e.style.setProperty('--height', e.naturalHeight) 123 - }, 124 - }), 134 + }, 125 135 126 136 error: 𐀶`<div class='error'><code>🕯error🕯</code>🕯message🕯<pre>🕯stack🕯`, 127 137