1.获取浏览器页面可见高度和宽度

var _PageHeight = document.documentElement.clientHeight,

_PageWidth = document.documentElement.clientWidth;

2.计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px)

var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,

_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;

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

var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:10000;"><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(/Content/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面加载中,请等待...</div></div>';

4.呈现loading效果

document.write(_LoadingHtml);

//window.onload = function () {

//    var loadingMask = document.getElementById('loadingDiv');

//    loadingMask.parentNode.removeChild(loadingMask);

//};

5.监听加载状态改变(这一步是防止LOADING出错)

document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果

function completeLoading() {

if (document.readyState == "complete") {

var loadingMask = document.getElementById('loadingDiv');

loadingMask.parentNode.removeChild(loadingMask);

}

}

说明:
将此段js代码放入<head>最后即可;
其中loading效果的样式可以根据自己的风格修改,loading.gif这个图片需要自己找
 
这个用JQ也可以实现。

JS实现页面加载完毕之前loading提示效果的更多相关文章

  1. js实现的页面加载完毕之前loading提示效果

    页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...

  2. JS判断页面加载完毕

    //JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...

  3. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  4. 一个等待页面加载完毕的loading动画

    1 html 部分 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" ...

  5. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  6. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  7. 页面加载完毕执行多个JS函数

    通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如:window.onload=firstFunctio ...

  8. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  9. JS在页面加载之后运行

    通用的页面加载后再运行JS有两种方式:1.在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前运行JS.   2.在页面全部内容加载完成(包括引用文件,图片等)之后再加载JS 1.在DOM加载后 ...

随机推荐

  1. 扩展欧几里得 exGCD

    Elementary Number Theory - Extended Euclid Algorithm Time Limit : 1 sec, Memory Limit : 65536 KB Jap ...

  2. 内嵌iframe

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

  3. myeclipse2013以及以后的最新版各种破解(其实就是获取活跃码而已)

    当你下到最新版的myeclipse-blue的时候你是否会为注册激活而烦恼呢,别担心,其实激活也就那么点事儿,请遵循我如下做法就可以了: 免积分下载破解地址 http://download.csdn. ...

  4. Android从零开始——Android开发环境的安装

    Android开发环境的安装 1 IDE Android可以使用开发的IDE有Eclipse 或者 Android Studio.Android Studio还处于v 0.1.x版本,是early a ...

  5. CSS优化技巧

    CSS是页面效果呈现中非常重要的组成部分,它包括颜色.大小尺寸.背景和字体等.写CSS很简单很容易,但是要想写出精炼的CSS代码还是有很多技巧的. 下面就是技巧7则: . 合并多个相同属性: 比如很多 ...

  6. 为ASP.NET MVC应用程序使用高级功能

    为ASP.NET MVC应用程序使用高级功能 这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译, ...

  7. PatrolRobot(UVa1600)BFS

    PatrolRobot(UVa1600)BFS 珉黻郐距 河吏蝉醉 闵棵黏言 芤她之瞌 褰上稽莨 錾傻奉 郦玫睃芩 摇摇头还没回答魏海洪就抢先回答道:呵呵你们几个别试 蚰镉氡 钬 绦可 ...

  8. 15.Three Sum

    思路 直接暴力,\(O(n^4 log(n))\),不出意外的超时了.. class Solution { public: vector<vector<int>> threeS ...

  9. spring boot基础 入门

    spring boot基础 spring boot 的简单搭建 spring boot 的基本用法 spring boot 基本用法 自动配置 技术集成 性能监控 源码解析 工程的构建 创建一个mav ...

  10. ArcGis 属性表.dbf文件使用Excel打开中文乱码的解决方法

    2019年4月 拓展: ArcGis——好好的属性表,咋就乱码了呢? 2019年3月27日补充: 在ArcMap10.3+(根据官网描述应该是,作者测试使用10.5,可行)以后的版本,可以使用ArcT ...