找回密码
当前位置：前端开发者 > 教程 > 正文

移动端页面添加首屏loading效果

2018-09-26 21:06:57 分类：教程 阅读(300) 评论(0)

web前端开发需要掌握 前端开发需要英语数学吗 前端开发者需要的10个sublime插件

移动端页面在图片或要加载的项比较多时，用户等待时间一般比较久，为了提高用户体验，需要在进入页面时加入一个显性loading。在页面一些关键图片用jquery的load()控制loading动画，代码如下：

html 代码片段

<head>
    <meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”>
    <title>首屏显性加载</title>
    <style>
        body {
        margin:0;
        padding:0;
        }
        #loadingbg {
        background-color : #222222;
        height : 100%;
        width : 100%;
        position : fixed;
        z-index: 3;
        }
        #loadingwrap {
        height : 20px;
        width : 200px;
        box-shadow : 0px 0px 10px #111111 inset;
        margin: 0 auto;
        margin-top: 50vh;
        }
        #loading {
        height : 20px;
        width : 0;
        text-align: center;
        background-color : #C9F76F;
        box-shadow : 0px 0px 5px #222 inset;
        }
        .wrap{
        width : 100%;
        margin: 0 auto;
        }
        .bg-img{
        width: 100%;
        max-width:75vh;
        }
    </style>
    <script type=”text/javascript” src=”http://libs.useso.com/js/jquery/2.1.1/jquery.min.js”></script>
</head>
<body>
    <div id=”loadingbg”>
        <div id=”loadingwrap”>
            <div id=”loading”>loading</div>
        </div>
    </div>
    <div class=”wrap”>
        <img class=”bg-img” src=”http://wx.karlew.com/loading/img/1.jpg”>
        <img class=”bg-img” src=”http://wx.karlew.com/loading/img/2.jpg”>
        <img class=”bg-img” src=”http://wx.karlew.com/loading/img/3.jpg”>
        <img class=”bg-img” src=”http://wx.karlew.com/loading/img/4.jpg”>
        <img class=”bg-img” src=”http://wx.karlew.com/loading/img/5.jpg”>
        <img class=”bg-img” src=”http://wx.karlew.com/loading/img/6.jpg”>
        <img class=”bg-img” src=”http://wx.karlew.com/loading/img/7.jpg”>
    </div>
    <script type=”text/javascript”>
        var loadNum = 0;
        var imgNum = $(‘.bg-img’).length;
        var txtGrad = parseInt(100 / imgNum);
        var bgGrad = parseInt(200 / imgNum);
        $(‘.bg-img’).each(function () {
            //加入complete为了判断图片是否在未绑定load事件就已经加载完成
            if ($(this)[0].complete) {
                loadNum += 1;
                $(“#loading”).text(loadNum * txtGrad + “%”).width(loadNum * bgGrad + “px”)
                if (loadNum >= imgNum) {
                    $(“#loading”).text(“100%”).width(“200px”);
                    $(“#loadingbg”).animate({ opacity: “0” }, function () {
                        $(this).hide()
                    })
                }
            } else {
                $(this).load(function () {
                    loadNum += 1;
                    $(“#loading”).text(loadNum * txtGrad + “%”).width(loadNum * bgGrad + “px”)
                    if (loadNum >= imgNum) {
                        $(“#loading”).text(“100%”).width(“200px”);
                        $(“#loadingbg”).animate({ opacity: “0” }, function () {
                            $(this).hide()
                        })
                    }
                })
            }
        })
    </script>
</body>
</html>

演示地址（建议在移动端或Toggle device mode下查看）：http://wx.karlew.com/loading/

web前端开发需要掌握的技能 学前端开发需要多久 前端开发需要学啥

» 本文来自：前端开发者 » 《移动端页面添加首屏loading效果》
» 本文链接地址：https://www.rokub.com/5863.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论