jquery 百分比加载网站的页面,完全加载完成再显示

kevin-ying · 发表于 2015-9-23 00:15:24

在jquery里可以直接用

[C] 纯文本查看 复制代码

isNaN()

，因为他是JavaScript的类库。是由JavaScript语言写的。
例如：

[JavaScript] 纯文本查看 复制代码

<script type="text/javascript">
$(document).ready(function(){
alert(isNaN($('#id').val()));
}); 
</script>

可以直接使用

kevin-ying · 发表于 2015-9-23 00:29:02

JS实现页面加载完毕之前loading提示效果

[JavaScript] 纯文本查看 复制代码

//获取浏览器页面可见高度和宽度
        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 = '<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>';
        //呈现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代码放入<head>最后即可；
其中loading效果的样式可以根据自己的风格修改，loading.gif这个图片需要自己找（网上很多的）。

		自动登录	找回密码
密码			免费注册

[Jquery] jquery 百分比加载网站的页面,完全加载完成再显示

本帖被以下淘专辑推荐:

相关帖子