/*正在加载*/
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. input 实现onchange效果

    $(".selected input").on('input',function(e){ cc.search(); });

  2. luoguP3359 改造异或树

    https://www.luogu.org/problemnew/show/P3359 因为 a ^ b ^ b = a,所以我们预处理 1 到所有点的距离,将删边的操作反过来变成加边,对于每一个联通 ...

  3. Ruby 和 OpenSSL CA 证书的问题

    作为一个版本控,总是希望保持电脑中各种软件到最新版本. 最近通过 brew 升级 OpenSSL 和 ruby-build 到最新,尤其是 ruby-build 支持最新的 Ruby 2.2.1,新版 ...

  4. Ionic无法通过npm安装解决方案

    http://www.jianshu.com/p/5a99334eb62d 一般从 node.js官网下载安装完之后,npm也会同时安装完. 如果通过 $ npm install -g cordova ...

  5. npm淘宝镜像和默认镜像切换

    1.得到原本的镜像地址 npm get registry > https://registry.npmjs.org/ 设成淘宝的 npm config set registry http://r ...

  6. POJ3321 Apple Tree (JAVA)

    树形数组题,有一定难度. 首先得搞清楚树形数组是什么 - 它是建立在原始数组上的统计数组 - 目的:方便对原始数组进行切片统计,主要用于统计切片的累加和 其实你可以对切片进行扫描,把元素一个一个加起来 ...

  7. 1.jQuery入口函数

    <!--注意,如果需要对ie67兼容,我们可以使用原生低版本的jquery 比如说jquery-1.12.4.js--> <!DOCTYPE html> <html la ...

  8. 在makefile中打印错误或警告信息

    在makefile中打印警告或者错误消息的方法: $(warning xxxxx) 或者 $(error xxxxx) 输出变量方式为: $(warning $(XXX))

  9. 查看已安装tensorflow版本以及安装路径

    查看版本: import tensorflow as tf tf.__version__ 查看安装路径: tf.__path__

  10. 阿里云Centos下安装nginx之后外网无法访问

    centos 7.4 nginx1-14.0编译安装 curl 127.0.0.1 可以请求到 index.html curl local 可以请求到 index.html http://ip/ 无法 ...