实时加载页面的内容loading（主要针对图片）

来源：互联网发布：单片机方案公司编辑：程序博客网时间：2024/05/29 18:33
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <title></title>        <style>            .loading{        width: 100%;height: 100%;background: #fff;position: fixed;top: 0;left: 0;z-index: 100;            }            .loading .pic{                width: 100px;height: 100px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;                text-align: center;line-height: 100px;font-size: 25px;            }            .loading .pic span{width: 80px;height: 80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;            -webkit-box-shadow: 0 3px 0 #333;                    box-shadow: 0 3px 0 #333;-webkit-animation: rotate 0.6s infinite;animation: rotate 0.6s infinite;display: block;            }            @-webkit-keyframes rotate{                from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}                to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}            }            @keyframes rotate{                from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}                to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}            }        </style>    </head>    <body>        <div class="loading">            <div class="pic">                <span></span>                <b>0%</b>            </div>        </div>        <header>            <img src="http://img.tuku.cn/file_big/201503/d8905515d1c046aeba51025f0ea842f0.jpg" />            <img src="http://tupian.enterdesk.com/2013/mxy/12/11/4/3.jpg" />        </header>        <section class="banner">            <img src="http://tupian.enterdesk.com/2013/mxy/12/28/1/3.jpg" />        </section>        <section class="nav">            <img src="http://pic9.nipic.com/20100818/5462876_150854046500_2.jpg" />        <img src="http://pic10.nipic.com/20100929/4308872_150108084472_2.jpg" />            <img src="http://pic13.nipic.com/20110422/4629619_135327675102_2.jpg" />        <img src="http://t-1.tuzhan.com/03a005a9a4b8/c-2/l/2013/05/07/16/47c17c9b8f7d420e9a534cf06917182f.png" />            <img src="http://pic9.nipic.com/20100818/5462876_150854046500_2.jpg" />        <img src="http://pic27.nipic.com/20130314/10415779_101118376000_2.jpg" />            <img src="http://pic71.nipic.com/file/20150625/11114139_075051727000_2.jpg" />        <img src="http://pic41.nipic.com/20140601/11630322_221246144000_2.jpg" />            <img src="http://pic10.nipic.com/20100928/5116356_084653069385_2.jpg" />            <img src="http://www.dabaoku.com/sucaidatu/ziran/ziranfengjing/20026200.JPG" />        <img src="http://pic.58pic.com/58pic/14/84/96/62u58PICymD_1024.jpg" />        <img src="http://pic10.nipic.com/20100929/4308872_150108084472_2.jpg" />            <img src="http://pic74.nipic.com/file/20150810/13417830_143535932774_2.jpg" />        <img src="http://pic43.nipic.com/20140704/2531170_201939199000_2.jpg" />        </section>        <section class="abourt">            <img src="http://pic.58pic.com/58pic/13/87/72/73t58PICjpT_1024.jpg" />        <img src="http://tupian.enterdesk.com/2014/mxy/02/11/4/4.jpg" />        </section>        <section class="pro">            <img src="http://img1.imgtn.bdimg.com/it/u=2418226610,2868081468&fm=214&gp=0.jpg" />        </section>        <script src="js/jquery-1.11.0.js"></script>        <script type="text/javascript">            var img = $("img");            var num = 0            img.each(function(i){                var oimg = new Image();                oimg.onload = function(){                    console.log(i)                    oimg.onload = null;                    num++;                   $(".loading .pic b").html(parseInt(num/$("img").size()*100)+'%');                    if(num>=i){                        $(".loading").fadeOut();                    }                }                oimg.src = img[i].src;            })        </script>    </body></html>
遇到一个坑，使用jq 3.0的版本在onload里面拿不到外码的i ,使用1.0就可以
阅读全文
0 0