CODEWITHSUNDEEP
javascriptjqueryajax
Trillumonopoly Inc
Trillumonopoly Inc

Reputation: 115

How To make a preloader page

I want to have a page that preloads untill the contents of the link/page that is being visited is fully loaded.

here is my code

$( document ).ready(function() {
     $.ajax({
    method: 'GET',
    url: "pages/main.html",
    success: function(content)
    {
        $('#contentarea').html (content);
    }
});
    });



$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).slideDown( 'very slow' )

    return false;
});

Upvotes: 0

Views: 62

Answers (2)

user6361120
user6361120

Reputation:

css

#loader-wrapper{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
   background-color: #ffffff;
   opacity: 1;
 }

html.put this div tag below the start of the body tag

<div id="loader-wrapper"></div>

javascript

window.addEventListener("load",function(){
  var load_screen = document.getElementById("loader-wrapper");
  document.body.removeChild(load_screen);
});

Upvotes: 0

Jai
Jai

Reputation: 74738

You can use $(document).ajaxStart().ajaxStop(): 

 $(document).ajaxStart(function (){
     $('#contentarea').prev().append('<span>loading</span>');
 }).ajaxStop(function (){
    $('#contentarea').prev('span').remove();
 });

Upvotes: 1

Related Questions