pjax-standalone 写法

最新推荐文章于 2025-09-02 20:44:11 发布

原创最新推荐文章于 2025-09-02 20:44:11 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

15 篇文章

订阅专栏

pjax

3 篇文章

订阅专栏

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

<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>