php 加载等待转圈页面,JS实现页面加载等待转圈效果页面加载完毕之前loading提示效果...

现在网页越来越大，用户在等待页面加载的过程中如果网页是空白，很容易造成访客没耐性而关掉网页，如果能有个加载提示，提示页面正在加载中，那效果将会很好。

这里使用一个JS文件搞定

代码如下：

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

var _PageHeight = document.documentElement.clientHeight,

_PageWidth = document.documentElement.clientWidth;

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

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

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

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

var _LoadingHtml = '页面加载中，请等待... '; //呈现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);

}

}

将以上文件全部存入JS文件中，比如叫load.js,然后放在网页的头部。

其中loading效果的样式可以根据自己的网页风格修改，loading.gif这个图片可以自己百度找下适合自己的动图。下面提供一份打包后的JS和loading,gif