在此加入一个关于页面加载成功之前先展现一个loading的案例:

如下代码写入js里放在html头部即可实现需求:添加的可以自己在css文件设置宽高,也可以放入一个background的gif的loading图片

//在页面未加载完毕之前显示的loading Html自定义内容

var _LoadingHtml = '页面加载中,请等待...';

//呈现loading效果

document.write(_LoadingHtml);

//监听加载状态改变
document.onreadystatechange = completeLoading; //加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
var loadingMask = document.getElementById('loadingDiv');
loadingMask.parentNode.removeChild(loadingMask);
}
}

下面这行代码没测试过,估计也有参考价值:

//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px)
var _LoadingTop = _PageHeight > ? (_PageHeight - ) / : ,
_LoadingLeft = _PageWidth > ? (_PageWidth - ) / : ;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = `<div id="loadingDiv"
style="position:absolute;left:0;width:100%;height:'
+ _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;
filter:alpha(opacity=);z-index:;"><div
style="position: absolute; cursor1: wait; left: '
+ _LoadingLeft + 'px; top:' + _LoadingTop + 'px;
width: auto; height: 57px; line-height: 57px;
padding-left: 50px; padding-right: 5px;
background: #fff url(image/dd.png)
no-repeat scroll 5px 10px; border: 2px solid #95B8E7;
color: #; font-family:\'Microsoft YaHei\';">页面加载中,请等待...</div></div>`;
//呈现loading效果
document.write(_LoadingHtml); //window.onload = function () {
// var loadingMask = document.getElementById('loadingDiv');
// loadingMask.parentNode.removeChild(loadingMask);
//}; //监听加载状态改变
document.onreadystatechange = completeLoading; //加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
var loadingMask = document.getElementById('loadingDiv');
loadingMask.parentNode.removeChild(loadingMask);
}
}

在页面加载前先出现加载loading,页面加载完成之后再显示页面的更多相关文章

  1. 图片全部加载完成之后再显示页面ui,公司项目里用上,自己写的几行代码

    说明: -----onload事件   这里我并没有考虑ie的兼容性 因为项目是移动端的: -----求大神指正~ -----自己测试正常 页面没加载完之前会有一个提示 /************** ...

  2. javascript 实现页面加载完再显示页面

    document.onreadystatechange = function () { if (document.readyState == "complete") { docum ...

  3. Ionic页面加载前 ionic页面加载完成 ionic页面销毁执行的事件

    ionic 中$ionicView.beforeEnter(页面刚加载前)  $ionicView.afterEnter  (页面加载完成) $destroy(页面销毁) 广播事件 //ionic c ...

  4. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  5. webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js

    今天学习了dev-server这个配置,中间遇到疑惑,我写了contentBase是可以走通,可以再localhost:8080看到页面并且正确加载bundle.js的,但是这个contentBase ...

  6. Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...

  7. php页面加载完毕后再显示购买按钮

    php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})

  8. js 百分比显示页面加载进度

    做东西遇到显示页面百分比的加载进度,不过里面的图片较多,看了别人的代码,才想到可以通过图片的加载显示加载的百分比,做一下笔记: html: <span id="percent" ...

  9. JQuery/JS插件 jsTree加载树,预先加载,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. 牛津初阶字典单词F-联想故事

    从前有一个fable寓言,讲的是奥巴马穿着棉fabrics织物,走在去往学校的路上,他的心情fabulous极好的,绝妙的.因为他学校的facilities 设施fabulous非常棒,但有些人不喜欢 ...

  2. Mysql 字符串指定位置插入空格

    UPDATE flow_data_243 SET data_15=CONCAT(LEFT(data_15,10),' ',RIGHT(data_15,LENGTH(data_15)-10)) WHER ...

  3. A Diversity-Promoting Objective Function for Neural Conversation Models论文阅读

    本文来自李纪为博士的论文 A Diversity-Promoting Objective Function for Neural Conversation Models 1,概述 对于seq2seq模 ...

  4. [Bilingual] Different proofs of Jordan cardinal form (Jordan标准型的几种证明)

  5. IDEA快捷建使用

    因为以前使用的IDE工具是Eclipse,所以在公司中都是用IDEA的情况下,换成了IDEA,感觉是好用了很多. 其他快捷键: Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表 ...

  6. gradle配置国内镜像

    对单个项目生效,在项目中的build.gradle修改内容 buildscript { repositories { maven { url 'http://maven.aliyun.com/nexu ...

  7. 用WPS查看两篇word文档异同之处

    写的合同,后期又有修改,电脑里同样名字的合同有好几个版本,不知道有什么不同,怎么办? 打开wps-->[审阅]-->[比较],剩下的按照提示很容易,略...

  8. CnPack IDE 专家包(CnWizards)显示代引用单元列表

    CnWizards_1.1.3.896

  9. 怎么写自己的CMakeLists.txt

    一. 为什么要使用cmake 理论上说,任意一个C++程序都可以用g++来编译.但当程序规模越来越大时,一个工程可能有许多个文件夹和源文件,这时输入的编译命令将越来越长.通常一个小型C++项目可能含有 ...

  10. 1.nginx_add_after_body

    语法: add_before_body uri;默认值: —配置段: http, server, location发起一个子请求,请求给定的uri,并且将内容追加到主题响应的内容之前. 语法: add ...