页面加载和图片加载loading

Posted it蛋散

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了页面加载和图片加载loading相关的知识,希望对你有一定的参考价值。

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

1.页面加载的方法,它需要用到js里面两个方法

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

两个方法同时使用

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

这里同时介绍两个网站:1.https://loading.io/,制作loading图案的网页,可以是svg,可以是gif,也可以是css3

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

           注意:都是部分要花钱,部分免费!

 

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,复制代码可以直接加载

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


</body>
</html>

 

以上是关于页面加载和图片加载loading的主要内容,如果未能解决你的问题,请参考以下文章

Lazy Load, 延迟加载图片的 jQuery 插件

JS问题:真实loading 页面加载完在显示页面

JQuery图片加载显示loading和加载失败默认图片

js等待图片加载完毕后再显示

jQuery Lazy Load 图片延迟加载

document.ready事件和document.load事件的区别