WordPress 加载进度条 nprogress.js给你的网站添加加载进度

WordPress 加载进度条  nprogress.js给你的网站添加加载进度-大可建站

在我们网站加载过程中,添加一个整体资源加载进度给访客,可以增加网站的灵动性。同时你的性能也会收影响。不过影响是微乎其微的,在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');