CODEWITHSUNDEEP
javascripthtmlimageloadinggif
Dragongeek
Dragongeek

Reputation: 243

How to fake a loading gif for a picture

I'm currently building a "live webcam" system for some pets so that they can be monitored from far away (overseas) and I want to have a loading gif that displays for a certain time and then shows a picture. I want the picture to be displayed on a delay for added authenticity. Its basically a joke to have a "loading gif" because the image size is so small, it loads right away. Here is my current code:

<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>

The problem with this is that the only picture ever seen is the "mostrecentimage.jpg" and I want to have the "picture loading" image display for about a second before the "mostrecentimage" is showed. What is the best way to do this?

Upvotes: 1

Views: 1380

Answers (2)

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

Try this way:

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);

Upvotes: 1

user1519979
user1519979

Reputation: 1874

doing it with javascript will be the easiest way. just search for loading spinner or loading images. there are several examples on the www. e.g. http://fgnass.github.io/spin.js/

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

Upvotes: 0

Related Questions