前端小结(4)---- 页面加载loding....

/*正在加载*/
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: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 2, 2, 0.15);
    opacity: 0.5;
    z-index: 1000;
}

.layout {
    display: none;
    position: absolute;
    top: 28%;
    left: 40%;
    width: 20%;
    height: 20%;
    z-index: 1001;
    text-align: center;
}
时间: 2024-12-21 23:17:56

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

网页前端页面加载性能测试各工具可行性方案分析

网页前端页面加载性能测试各工具可行性方案分析 征对各个浏览器和工具做了测试,之所以选择的是百度首页测试,因为其比较单一,没有多层嵌套和持续加载,尽量减少其他影响,测试中发现目前有些方案是不可行的,后面征对各个测试结果给出了可行方案和不可行的建议. 1 .webbrowser(内核IE10)和IE10浏览器的比较: Webbrowser的测试方法为,先执行清除浏览器缓存,从开始导航开始计时,DocumentCompleted时间将2次触发,取最后一次的时间,按照DocumentCompleted解

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

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

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

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

Web前端优化,提高加载速度

研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决定了这个网站的生死存亡. 可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too sim

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

最近在看一本名为<web性能实践日志>的书籍,其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法,这也是W3C Web性能工作小组正在做的事情,接下来我就给大家大概介绍一下: 首先先撇开这篇文章所要介绍的,如果要你来写一段代码来计算整个页面加载的时间的话,我们一般都会这样做:获得页面开始加载的时间和结束加载的时间,两个一减便是页面加载的时间了,没错,代码如下: 1 <html> 2 <head> 3 <script type

从输入URL到页面加载发生了什么

从输入URL到页面加载发生了什么 转自: https://segmentfault.com/a/1190000006879700 作者写得很不错,作者忽略了的,我加了上去,完善了一些,如get与post的区别等 总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 1.DNS解析 DNS解析的过程就是寻找哪台机器上有你需要资源的过程.当你在浏览器中输入一个地址时,例如www.baidu.com,其实不是百度网站真正意

41 关于请求被挂起页面加载缓慢问题的追查

缘起 有用户反馈内部MIS系统慢,页面加载耗时长.前端同学们开组会提及此事,如何解决慢的问题. 最致命的是:偶发!你不能准确知道它抽风的时间点,无法在想要追查问题的时候必现它.这只是一方面,另外,慢的可能实在太多了,那么问题来了,是前端导致的还是后端的问题? 对慢的定义也有待商榷,多久算慢?如果这个页面加载大量数据耗时增加那我认为这是正常的.但这个时限超过了一个合理的自然值,就变得不那么正常了,比如四五十秒,一分多钟. 最奇葩的是,如此久的耗时居然不会报超时错误,而是拿到正确返回后将页面呈现了出

页面加载优化的14条原则

1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN(Content Delivery Network) [server] 3. 添加 Expires 头(或者 Cache-control ) [server] 4. Gzip 组件 [server] 5. 将 CSS 样式放在页面的上方 [css] 6. 将脚本移动到底部(包括内联的) [javascript] 7. 避免使用 CSS 中的 Expressions [css] 8. 将 JavaScript 和 CSS

HTML 页面加载 Flash 插件的几种方法

前言 之所以写这篇文章,主要是因为组长给提的一个新的需求--使用浏览器调用电脑的摄像头,来实现即时拍照的功能.在网上查了很多资料,由于这样那样的原因,最终选择了使用flash插件来调用pc的摄像头.当然,这个需求是基于B/S架构的,因此,就在想怎么把它嵌入到前端的HTML页面中. 题外话 当然,这里还没有考虑到封装,主要是先以实现为目的,后续工作再根据业务进行抽象,封装成通用的组件.好了,废话不多说,看重点. 嵌入插件 使用 object 和 embed 标签 代码展示 <span style=