最近项目中大量用到了JQuery中的Ajax异步加载数据，数据量非常大，导致每次加载的时候都感觉到非常非常慢，让客户体验非常不好，就想到用JS做一个简单的提示。

JQuery版本：1.7.1；

编写一个JS类(ck.layer.js)：

[javascript] view plaincopy

/************************************* Achievo.Javascript Library **************************
* Using jQuery 1.7.1
* Using cks.js 1.0.1
* Name : ck.layer.js
* Create by Angle.Yang on 2012/03/07 [V1.0.0]
*******************************************************************************************/
(function($) {
$.fn.masklayer = function(settings) {
/// <summary>
/// 模态窗口，继承 easy-ui.window
/// </summary>
/// <param name="settings" type="object">扩展了{title:[div中的内容], action:[执行的动作，目前支持"close"], result:[返回结果]}</param>
/// <returns type="void" />
settings = $.extend(true, { title:'加载中...', action:"open"}, settings);
/// <summary>
/// 初始化所有 cks 样式的按钮（页面运行时进行初始化）
/// </summary>
/// <returns type="void" />
_init = function() {
if(settings.action =="open") {
if($("#div_load").length == 0) {
varboardDiv ="<div id='div_load'><\/div>";
$(document.body).append(boardDiv);
}
if($("#div_load").length > 0) {
$("#div_load").fix_ie6Select();
$("#div_load").css("display","block");
$("#div_load").css("height", document.body.offsetHeight);
$("#div_load").html(settings.title);
}
}
elseif(settings.action =="close") {
if($("#div_load").length > 0) $("#div_load").css("display","none");
}
elseif(settings.action ="setTitle") {
if($("#div_load").length > 0) $("#div_load").html(settings.title);
else{
varboardDiv ="<div id='div_load'>"+ settings.title +"<\/div>";
$(document.body).append(boardDiv);
$("#div_load").fix_ie6Select();
$("#div_load").css("display","block");
$("#div_load").css("height", document.body.offsetHeight);
}
}
};
return(function() { _init() })();
};

$("#div_load").fix_ie6Select();这句调用另一个JS，主要作用是兼容IE6遮罩一些控件(这个是我老大写的)：

[javascript] view plaincopy
1. /************************************* Achievo.Javascript Library **************************
2. * Using jQuery 1.7.1
3. * Using cks.js 1.0.2
4. * Name : ck.fixer.js
5. * Create by Toky on 2012/02/14 [V1.0.0]
6. *******************************************************************************************/
7. (function($) {
8. $.fn.fix_ie6Select = function() {
9. /// <summary>
10. /// 兼容弹出层在 IE6 下不能掩盖 Select
11. /// </summary>
12. /// <returns type="void" />
13. returnthis.each(function(index) {
14. varfrm = $(this).find('iframe[tag*="ie6Selector"]');
15. if(cks.browser.IE6) {
16. varw = $(this).width();
17. varh = $(this).height();
18. if(frm.length == 0) {
19. $(this).prepend('<iframe tag="ie6Selector" src="" frameborder="no" marginwidth="0" marginheight="0" style="border:none;position:absolute;visibility:inherit;top:0px;left:0px;width:'+ w +'px;height:'+ h +'px;z-index:-1;"></iframe>');
20. }
21. else{
22. frm.css("width", w);
23. frm.css("height", h);
24. }
25. }
26. });
27. };
28. })(jQuery);
})(jQuery);

利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /********************************* ...
php提交表单关闭弹出层,使用js实现关闭js弹出层的窗口
本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 function toggle() { theObj = document.getE ...
html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别, ...
html 关闭页面回调,popup.js弹出层回调关闭
效果如下: 父页面father,弹出层页面son,点击son.html的关闭按钮,关闭弹窗.采用popup.js弹窗插件. //弹出层 var pop; function ShowIframe(){ ...
js弹出一段html,html js 弹出层
弹出层―到浏览器中央―背景变暗:前端思考请猛击我(我会弹到中间,同时背景变暗) 弹出层标题栏这里是弹出层内容,内容可以是文字.图片等,可以是iframe传进来,也可以用jQuery的load()传进 ...
移动端 js 弹出层内容滚动的时候，不影响body的滚动条处理
如标题所示,这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发,自己重写了一下代码效果图: 代码: <!DOCTYPE HTML&g ...
利用 JS 判断页面图片静态资源链接是否有效是否加载完成
文章目录一.功能说明二.动图效果展示三.完整源代码一.功能说明利用原生 JS 实现对图片静态资源链接是否有效进行判断: 如果资源链接有效,直接渲染: 如果资源链接失效,3秒后替换新的链接,进 ...
swiper 弹出图片_结合swiper使用图片懒加载
记录下笔记,大神勿喷,可以留下优化建议,谢谢最近刚刚做了个展示型的网站,使用swiper搭的框架,因为图片比较多,所以首次加载稍微有些慢,虽然压缩过了,但是尽可能的优化吧,刚开始找了个懒加载的一个 ...
js 弹出层的点击事件影响到底层的点击事件_聊一聊 Node.js 错误处理
个人博客:https://blog.skrskrskrskr.com 错误分类软件程序中,我们可以将错误大致分为外部错误和内部错误两大类. 外部错误是正确编写的程序在运行时产生的错误.它并不是程序本 ...

利用JS弹出层实现简单的动态提示“正在加载中，请稍等...

利用JS弹出层实现简单的动态提示“正在加载中，请稍等...相关推荐

最新文章

热门文章