EasyUI for jQuery中每次加载页面时都会延迟加载组件样式的问题

@曹大帅

已于 2023-03-19 20:19:26 修改

阅读量261

点赞数

文章标签： easyui jquery 前端

于 2023-03-19 15:13:47 首次发布

本文链接：https://blog.csdn.net/qq_52255702/article/details/129644256

版权

EasyUI for jQuery中每次加载页面时都会延迟加载组件样式的问题

我们的页面中使用类名创建的组件有时会出现每次加载页面都会过一会才会加载样式的问题！一旦我们使用的类名组件越多时，这个现象就越明显。

问题出现的原因是什么？

我们加载文档结构和解析组件时是需要耗费时间的！
默认自动执行 $.parser.parse()方法时是在jquery的ready事件中。

先介绍一下parser插件的功能

属性

属性名	类型	描述	默认
$.parser.auto	boolean	是否在文档加载完成后执行`$.parser.parse()`	true

方法

方法	传递参数	描述	返回值
$.parser.parse	选择器名	解析页面某个节点下的所有的类组件

参数是可选的：参数的值会被$.parser.onComplete事件接收。另外此方法会覆盖$.parser.auto属性，可以理解为每次手动调用此方法时auto会自动变成false

事件

事件	接收参数	描述
$.parser.onComplete	选择器名	当所有的easyui组件被解析完成后执行

但是它有个苛刻的条件就是$.parser.auto为true或每次调用$.parser.parse这个方法时。

解决方案

如果没有使用easyloader，我们可以直接手动调用$.parser.parse()。这种方式比jquery的ready事件、dom的load事件和DOMContentLoaded事件、script的defer属性更加快。

	<body>
	    <input type="text" class="easyui-textbox">
	    <div class="dialog">dialog</div>
	    </div>
	    <script>
	        $.parser.parse()
	        $(".dialog").dialog({
	            width:400,
	            height:300
	        })
	    </script>
	</body>
	```

换一种思维方式，就是添加加载动画，使用动画蒙层遮挡整个页面，等解析器解析完成easyui组件时再关闭（推荐）

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./themes/bootstrap/easyui.css">
    <script src="./jquery.min.js"></script>
    <script src="./jquery.easyui.min.js"></script>
    <script>
        //记录开始加载时间
        sessionStorage.setItem("loadTime", Date.now())
    </script>
    <style>
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(127, 127, 127, 1);
            z-index: 9999;
        }

        .loading-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 6px solid #fff;
            border-top-color: #000;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: rotate 1s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <!-- 加载动画结构 start -->
    <div class="loading-overlay">
        <div class="loading-spinner"></div>
    </div>
    <!-- 加载动画结构 end -->
    <div class="easyui-dialog" style="width:400px;height:300px;">这是一个弹窗</div>
    <script>
        $.parser.onComplete = () => {
            const time = Date.now() - sessionStorage.getItem("loadTime");
            if (time > 1000) {
                //关闭加载动画
                document.querySelector(".loading-overlay").classList.remove("loading-overlay")
                document.querySelector(".loading-spinner").classList.remove("loading-spinner")
            } else {
                setTimeout(() => {
                    //关闭加载动画
                    document.querySelector(".loading-overlay").classList.remove("loading-overlay")
                    document.querySelector(".loading-spinner").classList.remove("loading-spinner")
                }, 1000)
            }
        }
    </script>
</body>

</html>