How do I delay the loading of an Image, so that i can display a loading.gif for 2 or 3 seconds before the image loads? (using jQuery/javascript)

Question

I have two images:

-loading.gif (which is the loading animation)

-scenery.jpeg (which is i what i want to display after the loading process);

because scenery.jpeg is a small file, using load() function will only skip the loading.gif

so when I click the button how do i display the loading.gif for 3 seconds before it loads scenery.jpeg?

advance thanks! :D

so i have this html file:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

$(document).ready(function(){
    $("#loading , #picture").hide();

    $("#button1").click(function(){
        /* the loading.gif shows then after 3 seconds scenery.jpeg will use fadeIn() */
    });
});
</script>

</head>

<body>
<button id="button1">Click Me!</button>
<img id="loading" src="loading.gif"/>>
<img id="picture" src="scenery.jpeg"/>
</body>
</html>

Answer 1

You can use delay() in this case:

$("#button1").click(function(){
    $("#loading").fadeIn().delay(3000).fadeOut('slow', function() {
       $(this).next().fadeIn() 
    });
});

Demo

Answer 2

Try this one:

$('#loading, #picture').hide();
$('#button1').on('click', function() {
  $('#loading').show();
  setTimeout(function() {
    $('#loading, #picture').toggle();
  }, 3000);
});

Answer 3

One of the ways would be:

Replace image src with throbber src .
Create new Image object, set it's src to one of image.
Add load event listener on Image , and set img src inside setTimeout with desired value.

The function the does that:

function delayLoad (img, throbber, delay) {
  var src = img.src,
      hidden = new Image();

  img.src = throbber;

  hidden.addEventListener("load", function (e) {
    setTimeout(function () {
      img.src = src;
    }, delay);
  });

  hidden.src = src;
}

Use it like this:

delayLoad(document.querySelector("img"), "http://www.mfshop.ru/images/throbber.gif", 3000);

JSBin .

How do I delay the loading of an Image, so that i can display a loading.gif for 2 or 3 seconds before the image loads? (using jQuery/javascript)

Question

3 answers

solution1
1 ACCPTED 2014-01-17 04:03:04

solution2
0 2014-01-17 03:48:33

solution3
0 2014-01-17 03:58:11

How do I delay the loading of an Image, so that i can display a loading.gif for 2 or 3 seconds before the image loads? (using jQuery/javascript)

Question

3 answers

solution1 1 ACCPTED 2014-01-17 04:03:04

solution2 0 2014-01-17 03:48:33

solution3 0 2014-01-17 03:58:11

solution1
1 ACCPTED 2014-01-17 04:03:04

solution2
0 2014-01-17 03:48:33

solution3
0 2014-01-17 03:58:11