js实现的页面加载完毕之前装货提示效果完整示例【附演示源码下载】

本文实例讲述了射流研究…实现的页面加载完毕之前装货提示效果。分享给大家供大家参考，具体如下：

一、JS代码：

//获取浏览器页面可见高度和宽度var _ page height=文档。文档元素。客户端高度，_页面宽度=文档。文档元素。客户端宽度；//计算装货框距离顶部和左部的距离（装载框的宽度为215px，高度为61px)var _ loadingTop=_页面高度61？(_PageHeight - 61)/2 : 0，_LoadingLeft=_PageWidth 215？(_页面宽度-215)/2 : 0；//在页面未加载完毕之前显示的正在加载超文本标记语言自定义内容var _ LoadingHTMl=' div id=' LoadingDiv ' style=' position : absolute；左转：0宽度：100%;height : ' _ page height ' pxtop :0 background : # f3f 8 ffopacity :0.8 filter : alpha(不透明度=80);z指数：10000;div style=' position :绝对值；cursor1:等待；left : ' _ LoAdingLeft ' pxtop : ' _ LoAdingTop ' px宽度：自动；高度： 57px线高： 57px左填充左侧： 50px填充-右侧： 5px背景： # fff URL(/Content/loading。gif)无重复滚动5px 10pxborder: 2px固体# 95b 8 E7 color : # 696969 font-family : '微软雅黑\ ';'页面加载中，请等待./div/div '；//呈现装货效果文件。write(_ LoadingHTMl)；//窗口。onload=function(){//var loading mask=document。getelementbyid(' loading div ')；//加载掩码。父节点。移除子项(加载掩码)；//};//监听加载状态改变文件。onreadystatechange=完成加载；//加载状态为完成时移除装货效果函数完成加载(){ if(文档。ready state==' complete '){ var loading mask=document。getelementbyid(' loading div ')；正在加载掩码。父节点。移除子项(加载掩码)；}}二、效果：

说明：

将此段射流研究…代码放入头最后即可；其中装货效果的样式可以根据自己的风格修改，正在加载。可交换的图像格式这个图片需要自己找（网上很多的)。

完整演示实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常见经典特效汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery form操作技巧汇总》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jquery中Ajax用法总结》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。