Search code examples
javascriptjqueryprogress-barpage-load-time

Passing page loading time in progress bar


I am having progress bar in my page. It should get display until page loads fully. So I want my progress bar display on page equal to page load time. So I tried to get page load time and pass that time value to display progress bar. I have done coding

<script type="text/javascript">
    var startTime = new Date().getTime();
    var loadTime;
    function pageload() {
        var endTime = new Date().getTime();
        loadTime = endTime - startTime;
        // alert(loadTime);
    }
    window.onload = function () { pageload(); }
    jQuery(document).ready(function () {

        jQuery('#container').showLoading(
             {
                 'afterShow':
                function () {
                    var a = loadTime;

                    setTimeout("jQuery('#container').hideLoading()", a);

                }
             });
    });
</script>

after This change It works !

<script type="text/javascript">
    var startTime = new Date().getTime();
    var loadTime;
    function pageload() {
        var endTime = new Date().getTime();
        loadTime = endTime - startTime;
        setTimeout("jQuery('#container').hideLoading()", loadTime);
        // alert(loadTime);
    }
    window.onload = function () { pageload(); }
    jQuery(document).ready(function () {

        jQuery('#container').showLoading();
    });
</script>

Solution

  • I may be wrong, but I think you just want to hide it on onLoad, like so:

    jQuery(document).onload(function(){
        jQuery('#container').hideLoading();
    });
    

    or put it in your pageload() function:

    function pageload() {
        var endTime = new Date().getTime();
        loadTime = endTime - startTime;
        jQuery('#container').hideLoading();
    }