哪种方式最好使用IMG标签和CSS背景图片进行游戏

Question

我在HTML5，CSS3和jQuery中创建简单的拖放游戏。对于这个游戏，我使用多个图像作为背景图像到单独的div鼠标向下，鼠标移动＆amp;老鼠事件。

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数据。

我曾经使用jQuery作为背景图像来更改图像。通过使用这种方式bg图像加载迟到和div显示空白空间。我无法预测bg图像的加载完成事件。

是否有任何事件可以让CSS bg图片加载成功或使用<img>标记最好？

Answer 1

您可以预加载将用作CSS背景图像的所有图像。使用这个有用的jquery library并具有imageLoaded的回调。

放置预加载器，直到加载完所有图像，并在加载图像后显示页面。现在如果你使用jquery更改CSS背景图像，它将被加载而没有任何问题。

希望有所帮助