JqueryEasyUI 解决IE下加载时页面错乱的问题

简介:

问题描述:

一直觉得jqueryeasyui在IE下的渲染效果不大好,尤其刚进入页面时的加载,页面会出现布局错乱,虽然是一闪而过,但是给用户的体验不好;

可以通过在页面onload时,增加一个遮罩层,把jqueryeasyui的页面渲染过程遮住,等页面加载完后,扔掉遮罩层,显示页面;


解决办法:

/*
文件说明:页面加载时Loading JS
文件描述:解决IE或FF下,初始化加载时,页面布局乱掉的问题,参考:http://283433775.iteye.com/blog/720895
*/
var width = $(window).width();
var height = $(window).height();

var html = "<div id='loading' style='position:absolute;left:0;width:100%;height:" + height + "px;top:0;background:#E0ECFF;opacity:1;filter:alpha(opacity=100);'>";
html += "<div style='position:absolute;cursor1:wait;left:" + ((width / 2) - 75) + "px;top:200px;width:150px;height:16px;padding:12px 5px 10px 30px;";
html += "background:#fff url(" + _basepath + "Scripts/jquery-easyui-1.4/themes/default/images/loading.gif) no-repeat scroll 5px 10px;border:2px solid #ccc;color:#000;'>";
html += "正在加载,请等待...";
html += "</div>";
html += "</div>";

window.onload = function () {
    var mask = document.getElementById('loading');
    mask.parentNode.removeChild(mask);
};
document.write(html);
 
把上面的js保存到文件,再引用到页面即可。

目录
相关文章
|
移动开发 前端开发 HTML5
web页面实现全背景视频功能方案:使用bideo.js来处理object-fit在ie浏览器下不兼容问题
web页面实现全背景视频功能方案:使用bideo.js来处理object-fit在ie浏览器下不兼容问题
194 0
web页面实现全背景视频功能方案:使用bideo.js来处理object-fit在ie浏览器下不兼容问题
|
JavaScript
单独的html页面做兼容IE
单独的html页面做兼容IE
|
安全
Selenium在Win10下IE浏览器遇到的白屏初始页面解决方案
开发环境:Win10+Python3.5+Selenium+IE11硬件环境:联想MIIX700语言环境:English(US)在做数据爬取得时候,发现IE Driver出现白屏,跟着提示:“This is the initial start page for the WebDriver server“几经寻找,解决了问题。
1829 0
IE6下focus与blur错乱的解决方案
Miller同学发现的IE6 bug:如以下代码,点击textarea时,引发window的blur,导致focus与blur配对混乱: hello window.onblur=function(){ document.title= 'blur:' + Math.random() ; } window.onfocus=function(){ document.title= 'focus:' + Math.random() ; } 这应该是一个很常见的需求,例如,当前窗口定期更新数据,而窗口失焦则减少信息更新频率。
697 0