javascript - 图片加载执行顺序以及控制方法

Question

在刮奖效果中，我用Canvas在同一位置插入了两层图片

---

            this.conNode.appendChild(this.mask);//浮层，z-index=2;
            this.conNode.appendChild(this.background);//底层 z-index=1;

---

为了让浮层优先显示和加载，所以我将浮层定义在了前边
同时，为了让浮层位于底层之上，我设置了Z-INDEX属性
但是在调试中，依然发现底层比浮动层优先显示出来
我想问的是，有什么方法能够实现，让浮层在底层之前加载出来。

Answer 1

因为是每个图片独立发送请求的，利用 Javascript 按顺序加载图片不太现实，万一遇到阻塞，结果后面的图片就不加载了。为此写更复杂的行为控制，那就更没必要。
如果你这两层图片不是特别大，可以考虑将两个图合并一起，然后利用 CSS Sprites 技术去显示图片。

这样可以保障图片能按照你所希望的顺序被加载显示出来。

Answer 2

你可以在浮层的图片的onload事件里面再去加载底层图片