使用IMG标签和CSS背景图像进行游戏的最佳方式是哪种方式？

Question

我在HTML5，CSS3和jQuery中创建简单的拖放游戏。在这个游戏中，我是使用数字图像作为背景图像，一个独立的div与鼠标向下，鼠标移动和鼠标向上事件。

HTML代码是：

<div class="car"></div>
<div class="bus"></div>
<div class="bike"></div>

Css代码是：

.car{ background-image: url("../images/car.png");}
.bus{ background-image: url("../images/bus.png");}
.bike{ background-image: url("../images/bike.png");}

我需要使用的图像作为动态的不同游戏前：-花。

我将JSON数据用于动态图像urls。

我曾经用jQuery作为背景图像来改变图像.通过这种方式，bg图像加载较晚，而div显示为空空间。我无法预测bg图像的加载完整事件。

是否有任何事件是获得CSS bg图像加载成功或使用<img>标记是最好的？

Answer 1

您可以预加载所有用作CSS背景图像的图像.使用这个jQuery图书馆，它将非常有用，并具有imageLoaded的回调。

放置预加载程序，直到加载所有图像，并在加载图像后显示页面。现在，如果使用jquery更改CSS背景映像，它将被加载，不会出现任何问题。

希望它能帮上忙