CODEWITHSUNDEEP
javascriptjqueryhtml
CodeLab
CodeLab

Reputation: 134

Jquery code to show loading before display the main content

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

Upvotes: 1

Views: 1922

Answers (3)

theblindprophet
theblindprophet

Reputation: 7927

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.

Upvotes: 1

brk
brk

Reputation: 50291

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

Upvotes: 0

vitorio
vitorio

Reputation: 327

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.

Upvotes: 0

Related Questions