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

前端之家收集整理的这篇文章主要介绍了js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了js实现的页面加载完毕之前loading提示效果分享给大家供大家参考,具体如下:

一、JS代码

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代码放入最后即可; 其中loading效果的样式可以根据自己的风格修改,loading.gif这个图片需要自己找(网上很多的)。

完整demo实例代码点击此处

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》、《》及《用法总结》

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

猜你在找的JavaScript相关文章