/*正在加载*/
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. “全栈2019”Java第七章:IntelliJ IDEA注释快捷键

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. loj6570 毛毛虫计数(生成函数FFT)

    link 巨佬olinr的题解 <-- olinr很强 考虑生成函数 考虑直径上点数>=4的毛毛虫的直径,考虑直径中间那些节点以及他上面挂的那些点的EGF \(A(x)=\sum_{i\g ...

  3. 51nod2004 终结之时 (支配树+树剖+树链的并)

    link 我永远喜欢洛天依 给定一张图世末积雨云,你需要维护其支配树: 单点修改,子树修改,树链修改 子树求和,树链求和,多条树链的并集求和 撤销之前的操作 可以先用 Lengauer-Tarjan ...

  4. js 平均分割

    let alllist=res.data; var result = []; for (var i = 0; i < alllist.length; i += 3) { result.push( ...

  5. HTML-文本域属性设置

    1.设置文本域的字体 <TEXTAREA STYLE="font-size:9pt;font-family:verdana;color:#333333">输入内容< ...

  6. idea使用时,部分jdk的jar包(tool.jar com.sun.javadoc) 无法引入-gradle处理方案

    gradle 增加配置 def jdkHome = System.getenv("JAVA_HOME") dependencies { compile files("$j ...

  7. Vue生命周期钩子详解【个人解读】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Celery ValueError: not enough values to unpack (expected 3, got 0)的解决方案

    Celery ValueError: not enough values to unpack (expected 3, got 0)的解决方案 背景 最近因项目需要,学习任务队列Celery的用法,跟 ...

  9. Python时间time模块介绍

    一.明确时间元组 二.测试代码#!/usr/bin/env python # -- coding: utf-8 --' """ 时间模块,time的相关操作与测试 &qu ...

  10. spring-session-data-redis使用redis共享session

    1:添加jar包 <dependency> <groupId>org.springframework.data</groupId> <artifactId&g ...