Javascript 加载图像时加载图标

如何编程加载页面上的图像时显示的加载图标或图形。一个例子是什么

---

我的目标是防止用户在屏幕上看到这些图像，直到他们准备好制作动画为止（请参见中的问题）。

让我们从一个固定在屏幕中间的可见加载图像开始。然后，当页面完全加载时，我们将在

上添加一个

“page\u loaded”

类，该类：

[1] 开始淡出加载图像

[2] 开始淡入并将屏幕外图像转换到屏幕

window.onload=function（）{
document.body.classList.add（“page_loaded”）；
}

.loader{
不透明度：1；
过渡：2s不透明度；
高度：300px；
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.对,，
.左{
高度：100px；
位置：绝对位置；
过渡：1s-2s；
不透明度：0；
}
.左{
左：0；
transform:translateX（-50em）；
}
.对{
右：0；
转化：translateX（50em）；
}
.page_已加载。加载程序{
不透明度：0；
}
.page_已加载。对，
.page_已加载。左侧{
不透明度：1；
变换：translateX（0）；
}

---

如果您使用的是

Vanilla

或

jQuery

，我建议您使用它来实现您想要的目标

我会这样说：

$（函数（）{
$（'.img container img'）.imagesLoaded（）.done（function（））{
log（'imagesloaded'）；
$（'.img container.loader'）.remove（）；
$（'.img容器img.hide'）.removeClass（'hide'）；
}).fail（函数（）{
console.log（'加载图像失败'）；
});
});
.img响应{
最大宽度：100%；
}
.隐藏{
显示：无；
}

正在加载图像。。。。