Question

146

Is it possible to preload page contents with ajax/jquery technique?

rated 0 times [ 148] [ 2] / answers: 1 / hits: 29909 / 15 Years ago, wed, april 8, 2009, 12:00:00

Is it possible to preload all page contents (like showing a loading bar / animated gif.. or loading text.. ) until the contents are fully loaded and then displayed to the user/visitor ? If this is possible, can you give me just directions or resources to follow to achieve this. Because I was able to find image preloaders easily, but I am seeking for a preloading technique that will preload all content on the page before being displayed.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradleymoisesy

Add To Favorites

Follow

Total Points: 121

Total Questions: 105

Total Answers: 95

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

bradleymoisesy questions

1 which data type to use to expect date value in jest

Wed, Dec 22, 21, 00:00, 2 Years ago

1 React/Next.js doesn't seem to work with Apexcharts

Tue, Jun 1, 21, 00:00, 3 Years ago

1 React chart : prevent chart's canvas scaling with height and width

Mon, Feb 1, 21, 00:00, 3 Years ago

1 How to create Create an Excel File with javascript?

Thu, Jun 11, 20, 00:00, 4 Years ago

1 How to create a search filter using Vue js from API Data?

Thu, Jan 16, 20, 00:00, 4 Years ago

View All

answered 15 Years ago janayr · Accepted Answer

There's no need to use Ajax for this. Simply set the page's wrapper div display to none. Then change it to block when the document is loaded.

Your code might look like this, using vanilla javascript:

<script type=text/javascript>

    function preloader() {

        document.getElementById(preloader).style.display = none;

        document.getElementById(container).style.display = block;

    }



    window.onload = preloader;

</script>



<style>

div#wrapper {

    display: none;

}



div#preloader {             

    top: 0; right: 10px;

    position:absolute;

    z-index:1000;

    width: 132px; height: 38px;

    background: url(path/to/preloaderBg.png) no-repeat;

    cursor: wait;

    text-shadow: 0px 1px 0px #fefefe;  //webkit                 

}

</style>



<body>

    <div id=preloader>Loading... Please Wait.</div>

    <div id=wrapper>

        <!-- page contents goes here -->

    </div>

</body>

Update, in jQuery:

<script type=text/javascript>

    // Use $(window).load(fn) if you need to load all page content including images, frames, etc.

    $(document).ready(function(){ 

        $(#preloader).hide();

        $(#container).show();

    });

</script>

Related documents: Events/ready, Events/load, CSS/css & Core/$