easyui 页面加载闪现问题解决方法

蔚落 2021-08-26 18:37 506阅读 0赞

最近做项目在使用easy UI  这个前端框架  但是由于自己不是太熟悉所以好多弹出框内容都放在同一个页面所以造成了在刚进入页面时候会出现页面闪现问题。

找到出现这个问题原因：  是因为easy UI在初次加载的时候会解析页面如果数据过多的话就会出现内容闪现问题。

解决方案：

利用 $.parser.onComplete  这个事件加隐藏

![70][]

在闪现错位的最外层加了一个隐藏div

style="display:none"

在JS里面加入$.parser.onComplete 处理

js代码如下：

//页面解析完成后执行
    $(function(){})
    $.parser.onComplete=function(){
    	$("#query_criteria").show();
    }

html代码如下：

<div class="query_criteria" id="query_criteria" style="display:none">
    	<div class="query_tit"><em></em>查询条件</div>
    	<div class="query_cont">
    		<form class="form-inline">
    		          
    				  <div class="form-group">
    				    <label for="searchEnterprise">企业:</label>
    				    <input class="searchenterprise"  id="searchEnterprise" name="searchEnterprise" >
    				  </div>
    				  <div class="form-group">
    				    <label>检查人:</label>
    				    <input id="cperson" name="cperson" class="easyui-textbox" style="width: 147px" /> 
    				  </div>
    				  <div class="form-group">
    				    <label>日期:</label>
    				    <input id="checkDate" name="checkDate" class="easyui-datebox"  style="width: 147px" /><br /> 
    				  </div>
    				  <div class="form-group">
    					<a href="javascript:void(0)"  id="doSearch" class="easyui-linkbutton btn-default">查询</a>
    				  </div>
    				   <div class="form-group">
    					<a href="javascript:void(0)"  id="reset" class="easyui-linkbutton btn-default">重置</a>
    				  </div>
    				  <div class="form-group">
    					<a href="javascript:void(0)" class="easyui-splitbutton" data-options="menu:'#printType'">打印模板</a>
    				  </div>
    				  <div id="printType" style="width:147px;">
    		           <div>安全储粮检查清单</div>
    		           <div>安全储粮检查底稿</div>
    	              </div>
    				</form>
    	</div>
    </div>
    		 <table id="dg" style="display: block;width:100%;"></table>
    		 <div id="dialogContent" style="display:none">
    		 
    	     <div id="add" class="easyui-dialog" closed="true" title="信息" style="display:none;width: 900px; height: 460px; top: 20px; padding: 10px"	data-options="modal:true,buttons: '#dlg-buttonsRole'" >
    	     <div style="margin:0 auto;width:90%">
    			<form id="addForm" class="form-inline" enctype="multipart/form-data">
    			      <div class="form-group">
    			        <label for="addReservoir">库      区:</label>
    			        <input class="reservoir" id="addReservoir" name="addReservoir" required="required">   
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				     <label for="addEnterprise">企      业:</label>
    				    <input class="enterprise" id="addEnterprise" name="addEnterprise" required="required">
    				  </div>
    				  <div class="form-group">
    				    <label>检查人:</label>
    				    <input id="addPerson" name="addPerson" class="easyui-textbox" style="width: 147px" required="required" /> 
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				    <label>日      期:</label>
    				    <input id="addDate" name="addDate" class="easyui-datetimebox"  style="width: 147px" required="required" /><br /> 
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				    <label>检查底稿:</label>
    				    <input id="addCheckSituationFile" name="addCheckSituationFile" class="easyui-filebox" data-options="prompt:'Choose a file...'" style="width: 500px" /><br /> 
    				  </div>
    				   <div class="form-group">
    					<a href="javascript:void(0)"  id="acheckSituation" class="easyui-linkbutton btn-default" οnclick="$('#checkSf').dialog('open')"style="width: 147px;height:28px">检查情况填写</a>
    				   </div>
    				   <br/>
    				  <div class="form-group">
    				    <label>检查清单:</label>
    				    <input id="addCheckListingFile" name="addCheckListingFile" class="easyui-filebox" data-options="prompt:'Choose a file...'"  style="width: 500px" /><br /> 
    				  </div>
    				  <div class="form-group">
    					<a href="javascript:void(0)"  id="checkListing" class="easyui-linkbutton btn-default" style="width: 147px;height:28px" οnclick="$('#checkLf').dialog('open')">检查清单填写</a>
    				  </div>
    				  <div class="form-group">
    				    <label>备      注 :</label>
    				    <input id="remark" name="remark" class="easyui-textbox"  style="width: 500px;height:100px" /><br /> 
    				  </div>
    				</form>
    				</div>
    		</div>
    		<div id="dlg-buttonsRole">
    		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="addSumbit()">提交</a> 
    		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="javascript:$('#add').dialog('close')">关闭</a>
    	    </div>
    	    
    	    
    		<div id="checkSf" class="easyui-dialog" closed="true" title="检查情况填写" style="width:900px; height: 460px; top: 20px; padding: 10px"	data-options="modal:true,buttons:'#dlg-buttonsRole'">
    		    <div style="margin:0 auto;width:90%">
    			<form class="form-inline">
    			      <input id="checkSfId" type="text" style="display:none"> 
    			      <div class="form-group">
    				     <label>品种:</label>
    				     <input type="checkbox" name="varieties" value="0" /><span>小麦</span>
    				     <input type="checkbox" name="varieties" value="1" /><span>稻谷</span>
    				     <input type="checkbox" name="varieties" value="2" /><span>玉米</span>
    				     <input type="checkbox" name="varieties" value="3" /><span>大豆</span>
    				     <input type="checkbox" name="varieties" value="4" /><span>其他</span>
    				  </div>
    				  <div class="form-group">
    				     <a href="javascript:void(0)"  id="checkSituationTable" class="easyui-linkbutton btn-default" οnclick="addTable()"style="width: 147px;height:28px">检查情况填写表</a>
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				  <div  id="basicTable" class="easyui-tabs" style="width:710px;height:auto">
    				  </div>
    				  </div>
    				  <div class="form-group">
    				    <label>问题粮食的具体情况:      </label>
    				    <input id="specificSituation" name="specificSituation" class="easyui-textbox"  style="width: 500px;height:50px" /><br /> 
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				    <label>危及储粮安全的其他隐患:</label>
    				    <input id="otherHazards" name="otherHazards" class="easyui-textbox"  style="width: 500px;height:50px" /><br /> 
    				  </div>
    				</form>
    				</div>
    		   
    		</div>
    	  <div id="dlg-buttonsRole">
    		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="sConfirm()">提交</a>
    	  </div>
    	  
    	  
    	   
    	  <div id="checkLf" class="easyui-dialog" closed="true" title="检查清单填写" style="width: 900px; height: 460px; top: 20px; padding: 10px"	data-options="modal:true,buttons: '#dlg-buttonsRole'">
    	     <iframe id='checkLfF' scrolling='auto' frameborder='0'  src='<%=basePath%>/prodSafetyFrame/grainListing.jsp'style='width:100%;height:99%;'></iframe>
    	  </div>
    	  <div id="dlg-buttonsRole">
    		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="lConfirm()">提交</a>
    	  </div>
    	  
    	    
    	    
    	     
    	     <div id="update" class="easyui-dialog" closed="true" title="信息" style="width: 900px; height: 460px; top: 20px; padding: 10px"	data-options="modal:true,buttons: '#dlg-buttonsRole'">
    	     <div style="margin:0 auto;width:90%">
    	       <input id="updateId" type="text" style="display:none"> 
    			<form id="updateForm" class="form-inline" enctype="multipart/form-data">
    			      <div class="form-group">
    			        <label for="updateReservoir">库      区:</label>
    			        <input class="reservoir" id="updateReservoir" name="updateReservoir" required="required">   
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				     <label for="updateEnterprise">企      业:</label>
    				    <input class="enterprise" id="updateEnterprise" name="updateEnterprise" required="required">
    				  </div>
    				  <div class="form-group">
    				    <label>检查人:</label>
    				    <input id="updatePerson" name="updatePerson" class="easyui-textbox" style="width: 147px" required="required" /> 
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				    <label>日      期:</label>
    				    <input id="updateDate" name="updateDate" class="easyui-datetimebox"  style="width: 147px" required="required" /><br /> 
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				    <label>检查底稿:</label>
    				    <input id="updatecheckSituationFile" name="updatecheckSituationFile" class="easyui-filebox" data-options="prompt:'Choose a file...'" style="width: 500px" /><br /> 
    				  </div>
    				   <div class="form-group">
    					<a href="javascript:void(0)"  id="updateCheckSituation" class="easyui-linkbutton btn-default" οnclick="updateCheckSituation()"style="width: 147px;height:28px">检查情况填写</a>
    					<input id="updateCheckSituationId" name="updateCheckSituationId"  style="width: 147px;display:none" />
    				   </div>
    				   <br/>
    				  <div class="form-group">
    				    <label>检查清单:</label>
    				    <input id="updatecheckListingFile" name="updatecheckListingFile" class="easyui-filebox" data-options="prompt:'Choose a file...'"  style="width: 500px" /><br /> 
    				  </div>
    				  <div class="form-group">
    					<a href="javascript:void(0)"  id="updatecheckListing" class="easyui-linkbutton btn-default" style="width: 147px;height:28px" οnclick="updateCheckListing()">检查清单填写</a>
    					<input id="updateCheckListingId" name="updateCheckListingId"  style="width: 147px;display:none" />
    				  </div>
    				  <div class="form-group">
    				    <label>备      注:</label>
    				    <input id="updateRemark" name="remark" class="easyui-textbox"  style="width: 500px;height:100px" /><br /> 
    				  </div>
    				</form>
    				</div>
    		</div>
    		<div id="dlg-buttonsRole">
    		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="updateSumbit()">提交</a> 
    		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="javascript:$('#update').dialog('close')">关闭</a>
    	    </div>
    	    
    	    
    	     
    		<div id="updateCheckSf" class="easyui-dialog" closed="true" title="检查情况修改" style="width: 900px; height: 460px; top: 20px; padding: 10px"	data-options="modal:true,buttons:'#dlg-buttonsRole'">
    		    <div style="margin:0 auto;width:90%">
    			<form class="form-inline">
    			      <input id="updateCheckSfId" type="text" style="display:none"> 
    			      <div class="form-group">
    				     <label>品种:</label>
    				     <input type="checkbox" name="updateVarieties" value="0" /><span>小麦</span>
    				     <input type="checkbox" name="updateVarieties" value="1" /><span>稻谷</span>
    				     <input type="checkbox" name="updateVarieties" value="2" /><span>玉米</span>
    				     <input type="checkbox" name="updateVarieties" value="3" /><span>大豆</span>
    				     <input type="checkbox" name="updateVarieties" value="4" /><span>其他</span>
    				  </div>
    				  <div class="form-group">
    				     <a href="javascript:void(0)"  id="updateCheckSituationTable" class="easyui-linkbutton btn-default" οnclick="updateTable()"style="width: 147px;height:28px">检查情况填写表</a>
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				  <div  id="updateBasicTable" class="easyui-tabs" style="width:710px;height:auto">
    				  </div>
    				  </div>
    				  <div class="form-group">
    				    <label>问题粮食的具体情况 :      </label>
    				    <input id="updateSpecificSituation" name="updateSpecificSituation" class="easyui-textbox"  style="width: 500px;height:50px" /><br /> 
    				  </div>
    				  <br/>
    				  <div class="form-group">
    				    <label>危及储粮安全的其他隐患:</label>
    				    <input id="updateOtherHazards" name="updateOtherHazards" class="easyui-textbox"  style="width: 500px;height:50px" /><br /> 
    				  </div>
    				</form>
    				</div>
    		   
    		</div>
    	  <div id="dlg-buttonsRole">
    		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="updateSConfirm()">提交</a>
    	  </div>
    	  
    	  
    	   
    	  <div id="updateCheckLf" class="easyui-dialog" closed="true" title="检查清单修改" style="width: 900px; height: 460px; top: 20px; padding: 10px"	data-options="modal:true,buttons: '#dlg-buttonsRole'">
    	     <iframe id='updateCheckLfF' scrolling='auto' frameborder='0'  src=''style='width:100%;height:99%;'></iframe>
    	  </div>
    	  <div id="dlg-buttonsRole">
    		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="updateLConfirm()">提交</a>
    	  </div>
    	  
    	    
    	   
    	    <div id="view" class="easyui-dialog" closed="true" title="信息" style="width: 900px; height: 460px; top: 20px; padding: 10px"	data-options="modal:true,buttons: '#dlg-buttonsRole'">
    	        <select id="selectViewType" οnchange="toggleView()">
    	           <option value="0">安全储粮检查情况表</option>
    	           <option value="1">安全储粮检查清单</option>
    	        </select>
    			<iframe id='viewGrainSafe'scrolling='auto' frameborder='0'  src=''style='width:100%;height:360px;'></iframe>
    		</div>
    		<div id="dlg-buttonsRole">
    	    </div>
    	  </div>
    </body>

> <div class="query\_criteria" id="query\_criteria" style="display:none">

就是最外层加的隐藏div

[70]: /images/20210728/97754d781d4b47c79e43aa2b1f6ffceb.png