Jquery code to show loading before display the main content

Question

I am working with jquery on my page, I want when ever user click on a button an image will show loading for 1 second before the main content appears

Here is my code:

      <script>
      $(document).ready(function(){
          $("#UseractivityLog").click(function(){
          $(".UserProfileLogs-cont").html("<img src='image/loading.gif'/>");
//Then for 1/2 seconds this UserProfileLogs will display
          $(".UserProfileLogs").toggle();
      });  
          $("#IdealLog").click(function(){
          $(".UserProfileLogs-con").toggle();
      });  
      });
      </script>

Here is my HTML part

<a href="#" id="UseractivityLog">Logs</a>
<div id="UserProfileLogs-cont">
<div id="IdealLog"></div>
<div id="UserProfileLogs"></div>
</div>

Please i will appreciate jsfiled sample

Use can use setTimeout().

vinni
– vinni

2016-06-09 13:18:15 +00:00
Commented Jun 9, 2016 at 13:18 — vinni
– vinni, Commented Jun 9, 2016 at 13:18

theblindprophet · Accepted Answer · 2016-06-09 13:39:17Z

You have some selector inconstancies, make sure you are watching those (# instead of .).

For the pause, use setTimout():

$(document).ready(function(){
    $("#UseractivityLog").click(function(){
        $("#UserProfileLogs-cont").html("Loading...");
        setTimeout(function() {
            $("#UserProfileLogs-cont").html("<img src='http://placehold.it/350x150'>");
        }, 1000);

        //Then for 1/2 seconds this UserProfileLogs will display
        $(".UserProfileLogs").toggle();
    });  
    $("#IdealLog").click(function(){
        $("#UserProfileLogs-cont").toggle();
    });  
});

Fiddle: https://jsfiddle.net/Lqgum8hu/

For your comment:

//Then for 1/2 seconds this UserProfileLogs will display

Use another timeout:

setTimeout(function() {
    // Whatever...
}, 500);

I changed your HTML a little to present the examples, but it can be changed to however you want it without changing the Javascript.

brk · Accepted Answer · 2016-06-09 13:36:55Z

0

You can use setTimeout to update the image source after n seconds.

Also you can achieve this using single div and an nested img without using separate container for loading icon and image.

Hope this below snippet will be useful

HTML

<a href="#" id="UseractivityLog">Logs</a>
<div id="UserProfileLogs-cont">
  <img src="">
</div>

JS

$(document).ready(function(){
var _gif = "http://assets.motherjones.com/interactives/projects/features/koch-network/shell19/img/loading.gif";
var _forest="http://www.discovertheforest.org/images/hero/home/6.jpg";
          $("#UseractivityLog").click(function(){
          $("#UserProfileLogs-cont img").attr("src",_gif);
          setTimeout(function(){
          $("#UserProfileLogs-cont img").attr("src",_forest);
          },3000)
        });  

      });

Check this jsfiddle

answered Jun 9, 2016 at 13:36

brk

50.3k10 gold badges59 silver badges85 bronze badges

2 Comments

CodeLab Over a year ago

I tried loading another page but i kept loading image var _forest = "<?php echo slash;?>php-inc/Profilelogs.php";

brk Over a year ago

what is another page?

vitorio · Accepted Answer · 2016-06-09 13:18:41Z

0

You can wait until the body is ready:

function onReady(callback) {
    var intervalID = window.setInterval(checkReady, 1000);
    function checkReady() {
        if (document.getElementsByTagName('body')[0] !== undefined) {
            window.clearInterval(intervalID);
            callback.call(this);
        }
    }
}

function show(id, value) {
    document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function () {
    show('page', true);
    show('loading', false);
});


#page {
    display: none;
}
#loading {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgba(192, 192, 192, 0.5);
    background-image: url("https://i.sstatic.net/MnyxU.gif");
    background-repeat: no-repeat;
    background-position: center;
}

Here is a JSFiddle that demonstrates this technique.

answered Jun 9, 2016 at 13:18

vitorio

3271 gold badge3 silver badges18 bronze badges

1 Comment

CodeLab Over a year ago

i really don't know how to use the code can you give me example with my post

Collectives™ on Stack Overflow

Jquery code to show loading before display the main content

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related