jquery插件Pace.js无法正常工作
我正在使用jquery插件pace.js,我希望当页面加载时,首先加载进度条,然后显示内容,这是我的代码
<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>
在的jsfiddle将定义我的工作的结果.
在我的情况下,内容和进度条都会同时显示.
我想要的是:我希望首先显示进度条,进度条符号后,内容将像本网站一样显示.
更新:
这是我接下来尝试但当进度完成时它不会显示任何内容......
<!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>
| 归档时间： |
|
| 查看次数： |
8044 次 |
| 最近记录： |