javascript - 如果图像尚未完全加载，插入加载器图标的最佳方法是什么？

Question

给定 html 结构:

<div class="image-container">
    <img id="firstslide" src="img/verybig.jpg">
</div>

请问有没有简单易行的检查方法

1. 如果当前正在加载图像并在 div 中插入一个加载图标和
2. 已完成加载并显示完全加载的图片

有什么提示吗？

Answer 1

我会通过 CSS 实现，将加载器动画图像设置为所选图像的背景:

CSS:

img.loader {
  background: url(loader.gif) 50% 50% no-repeat;
}

HTML:

<div class="image-container">
  <img id="firstslide" class="loader" style="width: 100px; height: 100px;" src="img/verybig.jpg" alt=""/>
</div>