在我们网站加载过程中,添加一个整体资源加载进度给访客,可以增加网站的灵动性。同时你的性能也会收影响。不过影响是微乎其微的,在WordPress添加进度条功能我们使用Nprogress.js就可以快速实现。
实现效果
网站头图多了一个蓝色的进度条。
国内的网站添加代码
将以下代码添加到您的当前启用主题的 functions.php
文件中
// 引入进度条CDN,下面两个cdn是国内CDN
function enqueue_child_theme_nprogress_scripts() {
wp_enqueue_script('nprogress-js', '//cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js', array('jquery'), null, true);
wp_enqueue_style('nprogress-css', '//cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_nprogress_scripts');
// 进度条js
function add_custom_nprogress_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 开始加载时显示进度条
NProgress.start();
// 进度圆圈
NProgress.configure({ showSpinner: true });
// 监听页面加载完成事件
window.addEventListener('load', function() {
// 加载完成后立即隐藏进度条
NProgress.done();
});
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_nprogress_script');
国外的网站添加代码
// 引入进度条CDN,下面两个cdn是国外CDN
function enqueue_child_theme_nprogress_scripts() {
wp_enqueue_script('nprogress-js', '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js', array('jquery'), null, true);
wp_enqueue_style('nprogress-css', '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_nprogress_scripts');
// 进度条js
function add_custom_nprogress_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 开始加载时显示进度条
NProgress.start();
// 进度圆圈
NProgress.configure({ showSpinner: true });
// 监听页面加载完成事件
window.addEventListener('load', function() {
// 加载完成后立即隐藏进度条
NProgress.done();
});
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_nprogress_script');