等待页面的css样式加载完毕,Html内容加载完毕,样式生成后再进行展示,避免一开始加载内容后,逐渐渲染样式造成的不良视觉效果,增强用户体验。

新增base-loading.js文件,代码如下

 //获取浏览器页面可见高度和宽度
 var _PageHeight = document.documentElement.clientHeight,
     _PageWidth = document.documentElement.clientWidth;

 //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px)
 var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
     _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;

 //加载gif地址
 var Loadimagerul="/Content/LoadJs/Image/loading.gif";

 //在页面未加载完毕之前显示的loading Html自定义内容
 var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width:100px;; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url('+Loadimagerul+') no-repeat scroll 5px 12px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">玩命加载中...</div></div>';

 //呈现loading效果
 document.write(_LoadingHtml);

 //监听加载状态改变
 document.onreadystatechange = completeLoading;

 //加载状态为complete时移除loading效果
 function completeLoading() {
     if (document.readyState == "complete") {
         var loadingMask = document.getElementById('loadingDiv');
         loadingMask.parentNode.removeChild(loadingMask);
     }
 }

使用的时候,只需要在Head中引入就可以

  @*//加载JS动画效果*@
    <script src="~/Content/LoadJs/base-loading.js"></script> 

效果如下:引入后,加载Heml内容和样式的时候,会出现加载动画,加载完毕后显示出来,避免逐渐渲染出现的卡顿画面。

渲染完成,一次性显示渲染画面.

EasyUI-加载完Html内容样式渲染完成后显示的更多相关文章

  1. 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题

    解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...

  2. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  3. ExtJS 等待两个/多个store加载完再执行操作的方法

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架. Extjs加载Store是异步加载的,这有很多好处.但是当我们要在两个或多个不同的store加载完再执行一些操作 ...

  4. 使用selenium操作ant design前端的页面,感觉页面没加载完

    因需要收集页面数据,遂准备使用selenium爬取瓦斯阅读页面, 瓦斯网站使用的是ant design,元素定位非常困难,页面元素都没有ID,现在还只是能做到操作登录,不能自动打开订阅,查询某公众号, ...

  5. 1、html(),text(),value()的区别;2、remove() 3、加载完执行函数

    1 .html()用为读取和修改元素的HTML标签.2  .text()用来读取或修改元素的纯文本内容.3  .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html() ...

  6. 网页图片很多时,加载完后再加载图片(defer:延迟加载)

    图片影响页面加载速度,可以先加载完页面,再去加载图片. defer:告诉浏览器,这里面的js代码不影响网页脚本解析,可以解析完html脚本再执行这段js代码(个人理解). 网页代码:<img s ...

  7. 浏览器输入一个url的过程,以及加载完html文件和js文件的标志

    简单理解: 当在浏览器地址栏输入一url时,浏览器会做以下几个步骤: 1.将url转化为ip地址,也就是DNS解析,(先找本地host文件中是否有对应的ip地址,如果有就直接用,没有的话,就按域名的二 ...

  8. Android WebView 加载富文本内容

    WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...

  9. 在页面未加载完之前显示loading动画

    在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...

随机推荐

  1. EF架构~LinqToEntity里实现left join的一对一与一对多

    回到目录 对于linq to sql里实现left join我已经介绍过了,这篇文章的出现是由于最近在项目里遇到的一个问题,解决这个问题花了我不少时间,可能有2个小时,事件是这样的,对于两个表,它们是 ...

  2. C#与JS实现 获取指定字节长度 中英文混合字符串 的方法

    平时在作数据库插入操作时,如果用 INSERT 语句向一个varchar型字段插入内容时,有时会因为插入的内容长度超出规定的长度而报错. 尤其是插入中英文混合字符串时,SQL Server中一般中文要 ...

  3. DOM_01之树及遍历

    1.DOM:ECMAScript+DOM+BOM,Document Object Model,核心DOM+HTML DOM+XML DOM: 2.辨析:①HTML:专门编写网页内容的语言:②XHTML ...

  4. ServletConfig对象详解

    在Servlet 的配置文件中,可以用一个或多个<init-param>标签为servlet配置一些初始化参数. 当servlet配置了初始化参数之后,web容器在创建servlet实例对 ...

  5. 解析大型.NET ERP系统 代码的坏味道

    1  对用户输入做过多的约定和假设 配置文件App.config中有一个设定报表路径的配置节: <add key="ReportPath" value="C:\Us ...

  6. KendoUI系列:DatePicker

    1.基本使用 <link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css" ...

  7. Android点击效果

    我们在开发网站时,会发现当我们添加<a/>标签后,标签有一个点击效果,比如颜色变化,这样开看起来用户体验会很棒,那么在我们的Android开发中如何加入这样的效果呢?本篇就为大家揭开它的神 ...

  8. java中父类与子类, 不同的两个类中的因为构造函数由于递归调用导致栈溢出问题

    /* 对于类中对成员变量的初始化和代码块中的代码全部都挪到了构造函数中, 并且是按照java源文件的初始化顺序依次对成员变量进行初始化的,而原构造函数中的代码则移到了构造函数的最后执行 */ impo ...

  9. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  10. 配置Hibernate二级缓存时,不能初始化RegionFactory的解决办法

    配置Hibernate 二级缓存时,出现以下bug提示: SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder&quo ...