webydesigny webydesigny - 4 months ago 112
Javascript Question

jquery plugin Pace.js not working

i am using jquery plugin pace.js, and i want that when the page is load then first the progress bar is loaded after that the content will shown,
this is my code

<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>


the jsfiddle will define the result of my work.

in my case the content and progress bar both will show simultaneously.

What i want: i want that first the progress bar will show and after the complition of progress bar the content will show like in this website.

Update:

This is what i try next but when the progress is complete then it will not show any contents...

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bk
</title>


<link rel="stylesheet" href="css/pace-atom.css"/>
<style>
#contents
{
display: none;
}
.cover {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1999;
background:rgb(33,33,33);
}
</style>


</head>
<body class="pace-done">


<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
<div>
<div id="contents">
<img src="d3.jpg" alt=""/><img src="d1.jpg" alt=""/><img src="d2.jpg" alt=""/><img src="d2.jpg" alt=""/><img src="d1.jpg" alt=""/>
</div>
</div>
<script src="js/pace.js"></script>
<script type="text/javascript">

$(function() {
Pace.on("done", function(){
$("#contents").fadeIn(1000);
});
}

</script>

</body>
</html>

Answer

Okay so an easy way to implement this is to hide all your contents until pace is done loading (I assume there is a reasoning to pace's load screen but I'm not sure).

So your contents could have an id #contents and be default display: none. You can then show the contents after pace is done like so

$(function() {
    Pace.on("done", function(){
        $("#contents").fadeIn(1000);
    });
});

Here is a fiddle of it working http://jsfiddle.net/59caubpx/3/

Comments