ansxor.ca
this repo has no description
image loading... ;
+33
-23
+33
-23
render.js
+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