页面加载和图片加载loading

时间 2019-11-08

标签页面加载图片 loading 繁體版

原文原文链接

准备放假了！也是闲着了，就来整理以前学到或用到的一下知识点和使用内容，此次记录的是关于加载的友好性loading！！！这里记录一下两种加载方法css

1.页面加载的方法，它须要用到js里面两个方法html

document.onreadystatechange = function(){}
document.readyState//有两个值
- interactive//加载中
- complete//加载完成

两个方法同时使用jquery

    document.onreadystatechange = function(){
        if(document.readyState == "complete"){//若是加载完成
            $('.loading').fadeOut();//让loading效果消失，显示页面
        }
    }

这里同时介绍两个网站：1.https://loading.io/，制做loading图案的网页，能够是svg，能够是gif，也能够是css3css3

　　　　　　　　　　　 2.https://icons8.com/preloaders/,一样也是找loading特效的网页web

　　　　　　　　　　　注意：都是部分要花钱，部分免费！svg

2.图片加载方式，一样的，须要用到js的Image图像对象和onload方法网站

    $(function(){
        var $img = $('img');
        var num = 0;//计算请求的个数
        $img.each(function(i){//遍历每一个图片
            var oImg = new Image();
            oImg.onload  = function(){
                oImg.onload = null;//避免重复请求
                $('.loading b').html( parseInt(num/ $img.length*100)+'%');//请求的个数/请求总数 的百分比
                num++;//每次遍历请求，添加一次
                if(num>= i){
                    $('.loading').fadeOut();
                }
            }
            oImg.src = $img[i].src;
　　　　　　　//注意：src属性的添加必需要onload方法的后面，否则报错！
        })
    })

下面是所有代码：（图片连接是远程，jq是cnd，复制代码能够直接加载）ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        img{width:100%;}
        .loading{background:green;position:fixed;top:0;left:0;width:100%;height:100%;z-index: 100;}
        .loading .icon{width:100px;height:100px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;font-size:30px;text-align:center;line-height:100px;color:white;}    
        .loading .icon span{display:block;position:absolute; width:80px;height:80px;border-radius:50%;box-shadow:0 2px 0 0 #ccc;top:10px;left:10px;animation:rotate 1s infinite linear;-webkit-animation:rotate 1s infinite linear;}
        @keyframes rotate{
            0%{transform:rotate(0deg);}
            100%{transform:rotate(360deg);}
        }
        @-webkit-keyframes rotate{
            0%{-webkit-transform:rotate(0deg);}
            100%{-webkit-transform:rotate(360deg);}
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>

    $(function(){

        var $img = $('img');
        var num = 0;
        $img.each(function(i){
            var oImg = new Image();
            oImg.onload  = function(){
                oImg.onload = null;//避免重复请求
                $('.loading b').html( parseInt(num/ $img.length*100)+'%');

                num++;
                if(num>= i){
                    $('.loading').fadeOut();
                }
            }
            oImg.src = $img[i].src;
        })
    })


    </script>
</head>
<body>
    <div class="loading">
        <div class="icon">
            <span></span>
            <b>0%</b>
        </div>
    </div>

    <img src="http://e.hiphotos.baidu.com/zhidao/pic/item/38dbb6fd5266d016bdeb8e0a932bd40735fa3525.jpg" alt="">
    <img src="http://f.hiphotos.baidu.com/zhidao/pic/item/902397dda144ad3464639dc8d1a20cf430ad85a4.jpg" alt="">
    <img src="http://attach.bbs.miui.com/forum/201605/11/163127pv36vrzvj7ggz8u4.jpg" alt="">
    <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1302/04/c0/17981969_1359970249179.jpg" alt="">
    <img src="http://img2.imgtn.bdimg.com/it/u=1691627983,2796098531&fm=27&gp=0.jpg" alt="">
    <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/78310a55b319ebc49ff591188026cffc1f1716a5.jpg" alt="">
    <img src="http://img2.imgtn.bdimg.com/it/u=3628218818,2760659836&fm=27&gp=0.jpg" alt="">
    <img src="http://img3.imgtn.bdimg.com/it/u=3373860863,3150615791&fm=214&gp=0.jpg" alt="">
    <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1302/04/c0/17981969_1359970249174.jpg" alt="">
    <img src="http://2t.5068.com/uploads/allimg/151028/57-15102QP537.jpg" alt="">
    <img src="http://d.hiphotos.baidu.com/zhidao/pic/item/6c224f4a20a44623aa0705099b22720e0df3d788.jpg" alt="">


</body>
</html>