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

This commit is contained in:
Tomáš Mládek 2021-01-13 22:43:36 +01:00
parent 4dbb9094b7
commit caecddc171

View file

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