正在加载中-js/jQuery功能实现

前言

       最近在springMVC中集成一个基于jsp报表工具,在集成之后的,由于报表运算量很大,SQL语句比较复杂,所以前台点击按钮触发以后,呆上几秒才有反应过来弹出报表框,所以想加入一个类似正在加载中的有好提示,使客户体验更好,不过没想象的那么容易,主要是产品采用的freemarker模版引擎,加载封装的dialog方法不能直接访问页面且不能直接向页面传参等等,不过问题都被我一一解决了,废话不多说,直接切入正题,主要看看这个小功能的简单实现吧。

 

引入如下HTML元素

[java]  view plain  copy
  1.   
  2.     "width:100% !important;height:850px;text-align:center;">  
  3.         "loading" style="margin-top:200px;">  
  4.             

      

  5.                 "loading图片路径/loading.gif" width="30xp" height="30px" />
      
  6.                 "height:30px;vartical-algin:center;padding-left:5px"> 正在统计中,请稍等......  
  7.             

      
  8.         
  
  •         "reportIframe" src=""  
  •             frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" width="100%" height="100%">  
  •            
  •     
  •   
  •   

  • 当然,我的是根据本项目封装的组件而定的,你可以不需要外层div或者不需要直接限定高度等等。

     

    js/jQuery关键代码

    [java]  view plain  copy
    1. $(function(){  
    2.     var frameUrl="frame里的要加载页面的路径";  
    3.     $("#reportIframe").attr("src",frameUrl);  
    4.     $("#reportIframe").load(function(){//jQuery控制“加载”div不显示  
    5.         $("#loading").css("display","none");  
    6.     });  
    7. });  


    效果

    正在加载中-js/jQuery功能实现_第1张图片

     

    后记

           如果你认真看完后,确实是,不完美,等待字样和图片要是浮在iframe所在内容之上就好了,这样iframe加载过度过程中与“正在加载”的字样和图片过度的就很缓和贴切,再就是“正在的加载”的字样和图片最后能直接定位在弹出框的中央而不是用margin,padding等样式来定位否则分辨率不同的情况下,可能就不一样了。

          以上缺点确实有待改善,由于本人时间和精力有限,项目紧,所以不再追求功能的更高质量了,如果正在读文章的您,有时间有兴趣有能力研究出来的话,非常欢迎你留言解答,以便您,我,还有大家共同进步与学习!

    你可能感兴趣的:(jquery)