我正在使用 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将定义我的工作结果。
在我的例子中，内容和进度条会同时显示。
我想要的:我希望首先显示进度条，在进度条完成后，内容将显示为 this网站。
更新:
这是我接下来要尝试的，但是当进度完成时，它不会显示任何内容...
<!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>
最佳答案
如果进度条停留在 99%，并且如果您使用的是 Visual Studio，则必须取消选中“启用浏览器链接”选项。这将解决进度条不完整的问题。
关于javascript - jquery 插件 Pace.js 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28385063/