准备放假了！也是闲着了 ，就来整理之前学到或用到的一下知识点和使用内容，这次记录的是关于加载的友好性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" 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>

页面加载和图片加载loading的更多相关文章

  1. 判断图片加载完成，自适应iframe高度

    在做RSS订阅的时候遇到这样一个问题:点击文章标题时,弹出文章的详细界面.本来打算直接用弹出div层来显示文章的内容,但是设置div的overflow:scroll滚动条不好看,还有就是在androi ...

  2. 深入探索Glide图片加载框架：做了哪些优化?如何管理生命周期?怎么做大图加载?

    前言 Glide可以说是最常用的图片加载框架了,Glide链式调用使用方便,性能上也可以满足大多数场景的使用,Glide源码与原理也是面试中的常客. 但是Glide的源码内容比较多,想要学习它的源码往 ...

  3. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

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

    在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图: 最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替. 页面引用 <div class=&q ...

  5. 基于jQuery的图片加载loading效果插件

    基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...

  6. layer iframe加载单个图片或者加载页面

    加载单个图片 layer.open({ type: , title: false, closeBtn: , area: '150px', skin: 'layui-layer-nobg', //没有背 ...

  7. 当h5页面图片加载失败后，给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  8. css背景图片加载失败，页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  9. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

随机推荐

  1. Java NIO之Java中的IO分类

    前言 前面两篇文章(Java NIO之理解I/O模型(一).Java NIO之理解I/O模型(二))介绍了,IO的机制,以及几种IO模型的内容,还有涉及到的设计模式.这次要写一些更贴近实际一些的内容了 ...

  2. 热烈祝贺达孚电子（NDF）网站上线

    尊敬的客户: 您们好! 为适应公司发展的需要,树立公司的良好形象,满足大家更多的了解电容器系列产品及公司的服务,经过1个多月的筹备,在2019年10月21日公司网站正式上线啦,这标志着NDF(达孚电子 ...

  3. 图论-最短路径<Dijkstra,Floyd>

    昨天: 图论-概念与记录图的方法 以上是昨天的Blog,有需要者请先阅读完以上再阅读今天的Blog. 可能今天的有点乱,好好理理,认真看完相信你会懂得 分割线 第二天 引子:昨天我们简单讲了讲图的概念 ...

  4. 2017.12.21 学习vue的新得

    温故而知新,这句话说的真的有道理.每次回顾vue总会学到不一样的知识点,我就在想,我第一遍到底看了什么? 废话不多说,简要记录今天的所得: 1.v-if 与 v-show 同:都是条件渲染 异:渲染的 ...

  5. p6spy打印SQL

    一 Springboot项目 <dependency> <groupId>p6spy</groupId> <artifactId>p6spy</a ...

  6. Rest_Framework之认证、权限、频率组件源码剖析

    一:使用RestFramwork,定义一个视图 from rest_framework.viewsets import ModelViewSet class BookView(ModelViewSet ...

  7. 死磕 java线程系列之线程池深入解析——定时任务执行流程

    (手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本. 注:本文基于ScheduledThreadPoolExecutor定时线程池类. 简介 前面我们一起学习了普通 ...

  8. linux虚拟机（centos7）常见配置解析

    1. 场景描述 在win7下安装了多台虚拟机,安装后常用的几个配置记录下,因安全策略,采用的仅主机模式(内网). 2. 解决方案 2.1.更改主机名称 (1)更改主机名称,不是连接的名称,是hostn ...

  9. python自带的IDLE编译器，听说大神都用这个（附python下载安装教程）

    python这两年这么火,学的人越来越多,小伙伴们都用什么编译器了? 今天教大家安装python并熟悉python自带的编译器IDLE. 第一步,进入python官网https://www.pytho ...

  10. 转：NFS原理详解

    原文:http://atong.blog.51cto.com/2393905/1343950 一.NFS介绍 1)什么是NFS 它的主要功能是通过网络让不同的机器系统之间可以彼此共享文件和目录.NFS ...