点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

在H5的页面中，我们经常会看到开头有一个loading的效果，这个loading的时间内就是在加载图片资源，以便后续滑屏效果更流畅。那么JS如何来判断图片资源已加载完成呢？且如何能更优雅的写断定代码。

首先，提一下两个事件：jquery中有一个ready和window.onload的区别。ready只是dom结构加载完成，图片并没有加载完毕，而onload是dom生成和资源完全加载出来后才执行，这里也就包括图片已加载。

所以，基本这点，接下来我们来看一下JS是如何断定单图和多图加载完成的。

考虑兼容

IE8下版本不支持onload事件，但支持onreadystatechange事件，readyState是onreadystatechange事件的一个状态，值为loaded或complete的时候，表示已经加载完毕。代码如下所示：

不考虑兼容

在不考虑兼容的情况下，使用onload事件就足够了，下面分单图和多图及结合promise来给出代码。

1. 单图(onload)

2. 单图(+promise)

3. 多图(onload)

4. 多图(+promise)