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

最新推荐文章于 2023-11-05 21:03:12 发布

weixin_34221773

最新推荐文章于 2023-11-05 21:03:12 发布

阅读量432

点赞数

CC 4.0 BY-SA版权

文章标签：前端 python javascript ViewUI

原文链接：https://my.oschina.net/u/3549294/blog/1476269

本文介绍了一种使用jQuery实现的自定义加载页面效果的方法，包括加载页面的透明度、背景颜色、边框样式等配置选项，并实现了页面加载完成后的渐出动画。

2019独角兽企业重金招聘Python工程师标准>>>

jQuery.MyCommon = {
    PageLoading: function (options) {
        var defaults = {
            opacity: 0.7,
            //loading页面透明度
            backgroundColor: "#3d3d3d",
            //loading页面背景色
            borderColor: "#bbb",
            //提示边框颜色
            borderWidth: 0,
            //提示边框宽度
            borderStyle: "solid",
            //提示边框样式
            loadingTips: "",
            //提示文本
            TipsColor: "#666",
            //提示颜色
            delayTime: 1000,
            //页面加载完成后，加载页面渐出速度
            zindex: 99999999,
            //loading页面层次
            sleep: 0
            //设置挂起,等于0时则无需挂起

        }
        var options = $.extend(defaults, options);

        //获取页面宽高
        var _PageHeight = document.documentElement.clientHeight,
        _PageWidth = document.documentElement.clientWidth;

        //在页面未加载完毕之前显示的loading Html自定义内容
        var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;width:100%;height:100%;background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + ';"><div id="loadingTips" style="position: absolute; cursor1: wait; width: 100%;border-color:' + options.borderColor + ';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + 'px; height:300px; line-height:80px; border-radius:10px;  background: ' + options.backgroundColor + ' url(../images/loading.gif) no-repeat center center; color:' + options.TipsColor + ';font-size:20px;">' + options.loadingTips + '</div></div>';

        //呈现loading效果
        $("body").append(_LoadingHtml);

        //获取loading提示框宽高
        var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
        _LoadingTipsW = document.getElementById("loadingTips").clientWidth;

        //计算距离，让loading提示框保持在屏幕上下左右居中
        var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
        _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;

        $("#loadingTips").css({
            "left": _LoadingLeft + "px",
            "top": _LoadingTop + "px"
        });

        //监听页面加载状态
        document.onreadystatechange = PageLoaded;

        //当页面加载完成后执行
        function PageLoaded() {
            if (document.readyState == "complete") {
                var loadingMask = $('#loadingPage');

                setTimeout(function () {
                    loadingMask.animate({
                        "opacity": 0
                    },
                    options.delayTime,
                    function () {
                        $(this).hide();

                    });

                },
                options.sleep);

            }
        }
    },removeLoading:function(){
    	$('#loadingPage').remove();
    }
}

转载于:https://my.oschina.net/u/3549294/blog/1476269