Question

我正在为一些宠物建立一个“实时网络摄像头”系统，以便可以从远处（海外）监控它们，我希望有一个显示一段时间然后显示图片的加载GIF。我希望图片能够延迟显示以增加真实性。它基本上是一个笑话，有一个“加载GIF”因为图像大小很小，它立即加载。这是我目前的代码：

<div  class="entry" style="position: relative; left: 0; top: 0;">
<img src="pictureloading.gif" style="position: relative; top: 0; left: 0;"/>
<img src="mostrecentimage.jpeg" alt="camDown.gif" style="position: absolute; top: 0; left: 0;"/>
</div>

这个问题是，有史以来唯一看到的图片是“mostrecentimage.jpg”，我希望在显示“mostrecentimage”之前显示“图片加载”图像大约一秒钟。这样做的最佳方式是什么？

Answer 1

尝试这种方式：

<强> HTML

<div class="entry" style="position: relative; left: 0; top: 0;">
<img src="pictureloading.gif" style="position: relative; top: 0; left: 0;"/>
</div>

<强> Jquery的

setTimeout(function() {
    $("div.entry").find("img").attr("src","mostrecentimage.jpeg");
}, 100);

Answer 2

使用javascript进行操作将是最简单的方法。只需搜索加载微调器或加载图像。 www上有几个例子。例如http://fgnass.github.io/spin.js/

http://www.jquery4u.com/jquery-functions/settimeout-example/

如何为图片假装加载GIF

2 个答案: