/*正在加载*/
function showLoading(elem) {
var html = '<div class="loading"><div id="over" class="over"></div><div id="layout" class="layout"><img src="../../assets/img/loading.gif" /></div></div>'
if (elem) {
elem.after(html);
} $("#over").css("display", "block");
$("#layout").css("display", "block");
} function hideLoading(elem) {
elem.next().remove();
}
<img src="../../assets/img/loading.gif" />中替换成对应的加载图标

对应css:
.over {
display: none;
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
background-color: rgba(2, 2, 2, 0.15);
opacity: 0.5;
z-index:;
} .layout {
display: none;
position: absolute;
top: 28%;
left: 40%;
width: 20%;
height: 20%;
z-index:;
text-align: center;
}

前端小结(4)---- 页面加载loding....的更多相关文章

  1. 前端开发,页面加载速度性能优化,如何提高web页面加载速度

    一个网页访问速度的快慢,  不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段. 文件的加载 图标的加载: ...

  2. 【前端工具】页面加载获取url param

    例如跳转进入一个页面: https://mp.csdn.net/postedit/74766644?name=catalina&flag=1 函数: function getParam(par ...

  3. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  4. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  5. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  6. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  7. 前端 页面加载完成事件 - onload,五种写法

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

  8. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  9. 利用Navigation Timing测量页面加载时间

    最近在看一本名为<web性能实践日志>的书籍,其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法,这也是W3C Web性能工作小组正在做的事情,接下 ...

随机推荐

  1. POJ - 2031C - Building a Space Station最小生成树

    You are a member of the space station engineering team, and are assigned a task in the construction ...

  2. Python导入模块Import和from+Import区别

    在我们使用python的时候会发现使用Import可以导入模块,from+Import也可以,那么他们之间有什么区别,该用哪一种呢?让我们来看看 1.首先在demo.py中创建一个变量a,定义一个函数 ...

  3. C#找出接口的所有实现类并遍历执行这些类的公共方法

    //这里找出了实现IOutputArray接口的所有类 private void FindAllClass() { var types = AppDomain.CurrentDomain.GetAss ...

  4. 2D激光SLAM算法比较+cartographer

    Hector slam: Hector slam利用高斯牛顿方法解决scan-matching问题,对传感器要求较高. 缺点:需要雷达(LRS)的更新频率较高,测量噪声小.所以在制图过程中,需要rob ...

  5. Django---错误

    ValueError: Dependency on app with no migrations: users 先 python manage.py makemigration 后 python ma ...

  6. tp5 重定向缺少index.php报错(No input file specified)

    转别人的,有用,Mark一下 public 下的.htaccess 修改为 <IfModule mod_rewrite.c>  Options +FollowSymlinks -Multi ...

  7. 移动端遇到的常见JS与CSS问题及解决方法

    由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidde ...

  8. java8特性之Lambda表达式

    1.典型的用Lambda表达式的场景 如果有这样的一个小应用,其中的一个类Student包含姓名(name),性别(sex),分数(score),如下: package demo; public cl ...

  9. linux下普通用户添加 sudo 免密码

    在使用普通用户登录的时候,会经常使用sudo指令执行一些操作,有时候感觉输入密码比较繁琐,特别是需要设置一些开机启动的时候操作,而这些操作往往就需要sudo指令,如果没有免密的话,在使用普通用户登录的 ...

  10. SQL语句exists用法

    首先头脑中有三点概念: 1 .  EXISTS子查询找到的提交 NOT EXISTS 子查询中 找不到的提交 说明:不要去翻译为存在和不存在,把脑袋搞晕. 2 . 建立程序循环的概念,这是一个动态的查 ...