如何伪造图片的加载 gif答案

【问题标题】：How to fake a loading gif for a picture如何伪造图片的加载 gif
【发布时间】：2013-07-26 19:04:03
【问题描述】：

我目前正在为一些宠物构建一个“实时网络摄像头”系统，以便可以从远处（海外）监控它们，我想要一个加载 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”之前让“图片加载”图像显示大约一秒钟。最好的方法是什么？

【问题讨论】：

使用javascript setTimeout() 函数。 developer.mozilla.org/en-US/docs/Web/API/window.setTimeout

标签： javascript html image loading gif

【解决方案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);

【讨论】：

【解决方案2】：

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

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

【讨论】：