分享一个好用的页面预加载效果

友好的页面加载效果

对于一个网站来说,页面加载时的等待效果是非常重要的,创建一种动画效果来过渡页面加载将会使用户得到更好的体验,也避免了加载前几秒位置错乱不齐的问题,该方法兼容各个浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
jQuery.MyCommon = {
    PageLoading: function(options) {
        var defaults = {
            opacity: 1,
            //loading页面透明度
            backgroundColor: "#fff",
            //loading页面背景色
            borderColor: "#bbb",
            //提示边框颜色
            borderWidth: 1,
            //提示边框宽度
            borderStyle: "solid",
            //提示边框样式
            loadingTips: "加载中......",
            //提示文本
            TipsColor: "#666",
            //提示颜色
            delayTime: 800,
            //页面加载完成后,加载页面渐出速度
            zindex: 999,
            //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;_position: absolute;width:100%;height:' + _PageHeight + 'px;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: auto;border-color:' + options.borderColor + ';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + 'px; height:80px; line-height:80px; padding-left:10px;padding-right: 5px;border-radius:10px;  color:' + options.TipsColor + ';font-size:20px;">' "<i  class='fa fa-spinner fa-spin mr5 fs-24'></i> " + 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).remove();
                            });
                    },
                    options.sleep);
            }
        }
    }
}
//调用
$.MyCommon.PageLoading({
    sleep: 200
});
虚拟主机
《JavaScript基础教程(第8版)》PDF
《JavaScript从入门到精通》PDF
《编写高质量JavaScript代码的68个有效方法》PDF
《锋利的jQuery(第2版)》PDF
广告也精彩