easy ui 初次加载是内容闪现问题解决方案

最新推荐文章于 2021-01-29 15:34:20 发布
最新推荐文章于 2021-01-29 15:34:20 发布
阅读量823 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36497454/article/details/79874548
版权

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

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

解决方案：

   利用：

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

我的页面内容如下：

下面红色部位就是容易闪现的部分

为了这两个部位闪现错位我都在最外层加了一个隐藏div 

style="display:none"

在JS里面加入一个函数  就可以解决这个问题了

//页面解析完成后执行

$(function(){})

$.parser.onComplete=function(){

	$("#query_criteria").show();
}
<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>


Iloveyouseeit
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EASY-UI示例；EASY-UI示例
09-13
EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例
iOS11 WKWebView 无法加载内容的解决方法
08-28
iOS11 WKWebView 无法加载内容的解决方法 WKWebView 是 iOS 中的一个网页视图控件，自 iOS 8 开始引入，取代了 UIWebView。WKWebView 提供了更好的性能和安全性，但是在 iOS 11 中，却出现了加载内容失败的问题。...
EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图
weixin_30363509的博客
02-21 139
使用EasyUI时，有个经常遇到的问题，页面还没有渲染完成的时候，就展现了。刚刚开始很混乱，等加载完成后，就好了。参考这篇文章http://blog.csdn.net/zheng0518/article/details/12287801 搞定了。 $.parser.onComplete，这个是在所有组件解析完成后执行的事件。其实这个事件很有用的。很多在布局用到easyui的时候总...
easyui(一) 初始easyui
weixin_34044273的博客
07-02 79
　　　　　　　　中午贪睡，睡到3点多，爬起来赶紧学习，学习是我快乐(自我催眠)。哈哈~ 　　　　　　　　　　　　　　　　　　　　　　--WH 一、什么是easyui？ 　　　　　　学习一个东西，最重要的是知道它的定位(是干嘛的，基本的用法是什么，快速入门)，其实easyui也非常简单，不要觉得很难。 　　　　　　easyui就是一个前端框架，JQuery EasyUI是一组基于jQuery的UI插...
【EasyUI】——页面加载闪屏问题
努力成为自己的榜样。
07-24 4367
引言   这个问题，做项目的时候真的很伤脑筋，页面展示很难看，强迫症根本受不了啊！终于终于，小编找到解决的办 法了。   页面加载原效果        小编不知道有多少人看过这个页面，如果我是用户，反正我是觉得糟心。   优化之后效果   界面是不是友好多了！下边看看如何实现吧~其实超简单！   实现原理
easyui页面初始化过程中div一闪而过的问题
weixin_34177064的博客
04-09 230
加载顺序问题，现在div上加上 style="display:none;" 然后在加载组件的js处用.show() $('#virtual_server_1').show().panel({ title: '基本属性', collapsible:true, ...
easyui页面被频繁请求，页面不能正常加载数据
qq_25381015的博客
07-15 351
var resultType; $(function() { $.ajax({ type: 'POST', url: '/dic?type=serverType', success: function (result) { resultT...
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
12-29
网上答案说是因为Easy-ui在低版本时应将class样式删去，而在javascript里写url，因为class里有url的话javascript里也存在url，就会使页面刷新俩次，但是测试后没有解决我的问题，后来通过反复测试终于找到问题， ...
easy_UI-CRM管理系统-SSH框架
07-12
综上所述，"easy_UI-CRM管理系统-SSH框架"是一个综合性的企业应用，通过SSH框架的强大功能实现后台逻辑处理，结合Easy UI的用户界面优化，为企业提供了全面的客户关系管理解决方案。这个系统旨在提高企业的客户服务...
unity Easy UI Motion v1.1.4.zip
06-27
Easy UI Motion allows you to animate your 2D full screen interfaces made with Unity UI, easily and visually. Manage Opening /closing effects, or simple effects on element or groups of elements that ...
easyui前端tab页加载优化
weixin_39809036的博客
01-29 236
使用easyui时，往往会涉及多个tab页，如果在初始进入页面是将所有数据都加载出来，会严重影响速度，所以我们可以选择当选中该tab页时再加载！
【easyui】解决easyui闪屏问题
Mankind的博客
09-30 1917
在最近的项目中，后台读取的数据，在前台渲染时需要一定的时间，这段时间内页面的格式混乱，但是过一会儿就会恢复。从用户的角度来看就是闪屏现象，点击之后总是要闪一下才能正常显示。为了增强用户体验，我们可以通过给所有页面增加一个遮罩层，弄出一个loading在转圈即可。前端代码如下： <div id='loadingDiv'style="position: absolute; z-index:
解决easyui中datagrid不分页加载大量数据渲染慢问题
weixin_30616969的博客
08-01 1272
easyui版本1.3.6 查看jquery.easyui.min.js源码，发现渲染数据时会调用函数_52a，会重置高度，进而增加渲染时间。 解决方法：设置datagrid的autoRowHeight: false。 转载于:https://www.cnblogs.com/chenboxi/p/9398259.html...
easyui 页面加载闪现问题 解决方法
whatday的专栏
03-01 787
最近做项目在使用easy UI 这个前端框架 但是由于自己不是太熟悉所以好多弹出框内容都放在同一个页面所以造成了在刚进入页面时候会出现页面闪现问题。 找到出现这个问题原因： 是因为easy UI在初次加载的时候会解析页面如果数据过多的话就会出现内容闪现问题。 解决方案： 利用 $.parser.onComplete 这个事件加隐藏 在闪现错位的最外层加了一个隐藏d...
Easy UI弹出加载中（loading）提示的两种方法
菜菜的博客
07-10 8166
最近项目的一个查询耗时比较久，用户点击查询没有反应可能造成重复点击，并且以为是bug，所以为了用户体验好一点想弹出加载中的遮罩提示，因为后台框架用的Easy UI，所以想到了两种办法。 方法一：利用Easy UI自带的遮罩样式，控制显示与隐藏 /*加载数据提示*/ function ajaxLoading() { $("<d...
easyui 页面加载的时候布局乱 一闪而过
u011094214的博客
07-04 1619
问题：如题解决办法：var shadeDiv = "&lt;div id='PageLoadingTip' style='position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: gray; text-align: center;'&gt; &lt;h1 style...
easy ui中的textBox不能粘贴复制过来的内容
最新发布
06-01
这个问题可能是由于textBox的属性设置不正确导致的。请检查textBox的属性，确保它的ReadOnly属性设置为false，同时也要确保它的Multiline属性设置为true。此外，您还可以尝试在textBox的事件处理程序中添加代码，以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值