javascript - 如何伪造图片的加载 gif

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/