0

在此先感谢您的帮助。

我正在尝试推迟加载 jquery-3.2.1.min.js 文件以修复渲染阻塞。所以,我尝试了以下方法:

<script>
        window.addEventListener('DOMContentLoaded', (event) => {
            let script0 = document.createElement('script');
            let script1 = document.createElement('script');
            let script2 = document.createElement('script');
            let script3 = document.createElement('script');
            let script4 = document.createElement('script');
            let script5 = document.createElement('script');
            let script6 = document.createElement('script');
            let script7 = document.createElement('script');
            script0.src = "<?php echo BASE; ?>assets/plugins/owlcarousel/dist/owl.carousel.min.js";
            script1.src = "<?php echo BASE; ?>assets/plugins/vendors/bootstrap.bundle.min.js";
            script2.src = "<?php echo BASE; ?>assets/plugins/vendors/jquery.sparkline.min.js";
            script3.src = "<?php echo BASE; ?>assets/plugins/vendors/selectize.min.js";
            script4.src = "<?php echo BASE; ?>assets/js/core.js";
            script5.src = "<?php echo BASE; ?>assets/plugins/jquery-toast/js/jquery.toast.js";
            script6.src = "<?php echo BASE; ?>assets/js/process.js";
            script7.src = "<?php echo BASE; ?>assets/js/general.js";
            script0.defer = true;
            script1.defer = true;
            script2.defer = true;
            script3.defer = true;
            script4.defer = true;
            script5.defer = true;
            script6.defer = true;
            script7.defer = true;
            document.head.appendChild(script0);
            document.head.appendChild(script1);
            document.head.appendChild(script2);
            document.head.appendChild(script3);
            document.head.appendChild(script4);
            document.head.appendChild(script5);
            document.head.appendChild(script6);
            document.head.appendChild(script7);
        });
    </script>

而且效果很好!我知道这不是最好的代码,但可以工作。

现在,如果我推迟 jquery-3.2.1.min.js : <script defer src="<?php echo BASE; ?>assets/plugins/vendors/jquery-3.2.1.min.js"></script>

... 依赖于 jquery 的文件,仍然不断中断。

调查时,我在几个线程中读到,在延迟的 JS 中,尽管被延迟,但应该尊重顺序。但是,如果我不使用上面的代码,而是使用另一个代码,那么依赖 jQuery 的 JS 也会中断:

    <script defer src="<?php echo BASE; ?>assets/plugins/vendors/jquery-3.2.1.min.js"></script>
    <script defer src="<?php echo BASE; ?>assets/plugins/owlcarousel/dist/owl.carousel.min.js"></script>
    <script defer src="<?php echo BASE; ?>assets/plugins/vendors/bootstrap.bundle.min.js"></script>
    <script defer src="<?php echo BASE; ?>assets/plugins/vendors/jquery.sparkline.min.js"></script>
    <script defer src="<?php echo BASE; ?>assets/plugins/vendors/selectize.min.js"></script>
    <script defer src="<?php echo BASE; ?>assets/js/core.js"></script>
    <!-- toast -->
    <script defer src="<?php echo BASE; ?>assets/plugins/jquery-toast/js/jquery.toast.js"></script>
    <!-- general JS -->
    <script defer src="<?php echo BASE; ?>assets/js/process.js"></script>
    <script defer src="<?php echo BASE; ?>assets/js/general.js"></script>

有什么指导吗?谢谢!!

4

0 回答 0