pjax-standalone 写法_stand的另一种写法-优快云博客

本文链接：https://blog.youkuaiyun.com/HD2killers/article/details/79940154

本文介绍了一种利用JavaScript和CSS资源懒加载技术优化网页加载速度的方法，并通过使用pjax实现页面局部刷新，增强用户体验。文中还展示了如何配置NProgress来显示加载进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
    <meta charset="UTF-8">
    <title>[title]</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/static/nprogress/nprogress.min.css">
    <script src="/static/js/pjax-standalone.min.js"></script>
    <script src="/static/js/lazyload.min.js"></script>
    <script src="/static/nprogress/nprogress.min.js"></script>
    <script>
        window.onload = function() {
            if (typeof(LazyLoad) != 'undefined') {
                new LazyLoad();
            }
            if (typeof(pjax) != 'undefined') {
                NProgress.configure({
                    // showSpinner : false // 不显示转动的小圆圈
                });
                pjax.connect({
                    'container': 'body', // id选择 默认为 body
                    // 'success': function(event) {
                    //     var url = (typeof event.data !== 'undefined') ? event.data.url : '';
                    //     console.log("Successfully loaded " + url);
                    // },
                    // 'error': function(event) {
                    //     var url = (typeof event.data !== 'undefined') ? event.data.url : '';
                    //     console.log("Could not load " + url);
                    // },
                    // 'ready': function() {
                    //     console.log("PJAX loaded!");
                    // },
                    'beforeSend': function(e) {
                        if (typeof(NProgress) != 'undefined') {
                            NProgress.start();
                        }
                    },
                    'complete': function(e) {
                        if (typeof(NProgress) != 'undefined') {
                            NProgress.done();
                        }
                    },
                });
            }
        };
    </script>
</head>