thm/line-and-surface
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity

if an image doesn't load in 3s, show a gray placeholder

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-13 22:43:36 +01:00
parent 4dbb9094b7
commit caecddc171
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/src/components/VideoScroll.vue
View file

@ -73,8 +73,14 @@ export default defineComponent({
if (!element.src) { if (!element.src) {
console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`); console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
element.src = element.dataset.src!; element.src = element.dataset.src!;
const grayTimeout = setTimeout(() => {
element.classList.add("visible");
element.style.background = "grey";
}, 3000);
element.onload = () => { element.onload = () => {
element.classList.add("loaded"); clearTimeout(grayTimeout);
element.classList.add("visible");
element.style.background = "none";
if (this.isHorizontal) { if (this.isHorizontal) {
element.style.height = "auto"; element.style.height = "auto";
} else { } else {
@ -119,7 +125,7 @@ export interface VideoScrollDef {
transition: opacity .5s; transition: opacity .5s;
} }
.loaded { .visible {
opacity: 1 !important; opacity: 1 !important;
} }