if an image doesn't load in 3s, show a gray placeholder
This commit is contained in:
parent
4dbb9094b7
commit
caecddc171
1 changed files with 8 additions and 2 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue