• 网页加载进度的实现--JavaScript基础

    总结了一些网页加载进度的实现方式……

    1、定时器实现加载进度

    <!DOCTYPE html>
    <html lang="en">
    <head>
    　　<meta charset="UTF-8">
    　　<title>定时器实现进度条</title>
    　　<style>
    　　*{margin:0;padding:0}
    　　.loading{ 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
    　　.loading .pic{64px;height:64px;background-image: url("images/loading.gif");position: absolute;
    　　left: 0;top:0;bottom:0;right: 0;margin: auto;}
    　　</style>
    　　<script src="js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
    　　<div class="loading">
    　　<div class="pic"></div>
    　　</div>
    　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
    　　<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
    </body>
    <script>
    　　$(function () {
    　　　　setInterval(function () {
    　　　　　　$('.loading').fadeOut();
    　　　　},3000)
    　　})

    　　// var load = '<div class="loading"> <div class="pic"></div> </div>';
    　　// $('body').append(load);
    　　// $(function () {
    　　// setInterval(function () {
    　　// $('.loading').fadeOut();
    　　// },3000)
    　　// })

    </script>
    </html>

    效果图：

    2、通过加载状态事件实现加载进度

    readyState定义和用法：

     

    readyState 属性返回当前文档的状态（载入中……）。

     

    该属性返回以下值:

     

    • uninitialized - 还未开始载入

    • loading - 载入中

    • interactive - 已加载，文档与用户可以开始交互

    • complete - 载入完成

     

    语法：document.readyState

    <!DOCTYPE html>
    <html lang="en">
    <head>
    　　<meta charset="UTF-8">
    　　<title>通过加载状态事件来实现加载进度</title>
    　　<style>
    　　*{margin:0;padding:0}
    　　.loading{ 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
    　　.loading .pic{64px;height:64px;background-image: url("images/loading.gif");position: absolute;left: 0;top:0;bottom:0;right: 0;margin: auto;}
    　　</style>
    　　<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    　　<script>
    　　　　document.onreadystatechange = function () {
    　　　　　　if(document.readyState == 'complete'){
    　　　　　　$('.loading').fadeOut();
    　　　　　　}
    　　　　}
    　　</script>
    </head>
    <body>
    　　<div class="loading"> <div class="pic"></div></div>
    　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
    　　<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
    </body>
    </html>

    效果图：

    3、加载状态事件结合css3进度条动画实现加载进度

    <!DOCTYPE html>
    <html lang="en">
    <head>
    　　<meta charset="UTF-8">
    　　<title>css3进度条动画</title>
    　　<style>
    　　*{margin:0;padding:0}
    　　.loading{ 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
    　　.loading .pic{50px;height:50px;position: absolute;left: 0;top:0;bottom:0;right: 0;margin: auto;}
    　　.loading .pic i{display: block; 6px;height: 50px;background-color: #399;float: left;margin: 0 2px;
    -webkit-transform: scaleY(0.4);-ms-transform: scaleY(0.4);transform: scaleY(0.4);-webkit-animation: loading 1.2s infinite;animation: loading 1.2s infinite
    　　}
    　　.loading .pic i:nth-child(1){}
    　　.loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s}
    　　.loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s}
    　　.loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s}
    　　.loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s}
    　　@-webkit-keyframes loading {
    　　0%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
    　　20%{-webkit-transform: scaleY(1);transform: scaleY(1)}
    　　50%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
    　　100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
    　　}
    　　@keyframes loading {
    　　0%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
    　　20%{-webkit-transform: scaleY(1);transform: scaleY(1)}
    　　50%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
    　　100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
    　　}
    </style>
    </head>
    <body>
    　　<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    　　<script>
    　　　　document.onreadystatechange = function () {
    　　　　　　if(document.readyState == 'complete'){
    　　　　　　　　$('.loading').fadeOut();
    　　　　　　}
    　　　　}
    　　</script>
    　　<div class="loading">
    　　<div class="pic">
    　　　　<i></i>
    　　　　<i></i>
    　　　　<i></i>
    　　　　<i></i>
    　　　　<i></i>
    　　</div>
    　　</div>
    　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
    　　<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
    </body>
    </html>
    效果图：

    4、通过定位在头部的进度条实现加载的进度

    <!DOCTYPE html>
    <html lang="en">
    <head>
    　　<meta charset="UTF-8">
    　　<title>定位在头部的进度条</title>　　
    　　<style>
    　　　　*{padding: 0;margin: 0;}
    　　　　.loading{ 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
    　　　　.loading .pic{0;height:4px;position: absolute;left: 0;top:0;background-color: #f33;}
    　　</style>
    </head>
    <body>
    　　<div class="loading"> <div class="pic"></div></div>
    　　<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <header>
    　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
    　　<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
    </header>
    <script>
    　　$(".loading .pic").animate({'30%'},100)
    </script>
    <section class="banner">
    　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
    　　<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
    </section>
    <script>
    　　$(".loading .pic").animate({'30%'},100)
    </script>
    <section class="aboout">
    　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
    　　<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
    </section>
    <script>
    　　$(".loading .pic").animate({'50%'},100)
    </script>
    <section class="pro">
    　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
    　　<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
    </section>
    <script>
    　　$(".loading .pic").animate({'70%'},100)
    </script>
    <section class="new">
    　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
    　　<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
    </section>
    <script>　　
    　　$(".loading .pic").animate({'90%'},100)
    </script>
    <footer>
    　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
    　　<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
    </footer>
    <script>
    　　$(".loading .pic").animate({'100%'},100,function () {
    　　$(".loading").fadeOut();
    　　})
    </script>
    </body>
    </html>
    效果图：

    5、通过实时获取加载数据实现加载进度

    建立图像对象：图像对象名称 = new Image();

    属性：border complete height

    事件：onload onerror onkeydown okeypress……

    src属性要写到onload后面，否则程序在IE中会出错。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    　　<meta charset="UTF-8">
    　　<title>实时获取加载数据实现加载进度</title>

    　　<style>
    　　　　*{padding: 0;margin: 0;}
    　　　　.loading{ 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
    　　　　.loading .pic{80px;height:80px;position: absolute;left: 0;top:0;right:0;bottom:0;margin:auto;text-align: center;}
    　　　　.loading .pic span{ 60px;height: 60px; position: absolute;left: 10px;top:10px;
    　　　　border-radius: 50%;box-shadow: 0 3px 0 #666;animation: rotate 0.5s infinite linear;-webkit-animation:rotate 0.5s infinite linear}
    　　　　.loading .pic b{font-size: 25px;line-height: 80px;}
    　　　　@keyframes rotate {
    　　　　　　0%{transform: rotate(0deg);}
    　　　　　　100%{transform: rotate(360deg);}
    　　　　　}
    　　　　@-webkit-keyframes {
    　　　　　　0%{-webkit-transform: rotate(0deg);}
    　　　　　　100%{-webkit-transform: rotate(360deg);}
    　　　　　}
    </style>
    <script src="js/jquery-3.2.1.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;
    　　　　　　num++;
    　　　　　　$('.loading .pic b').html(parseInt(num/$('img').length*100))+"%";
    　　　　　　if (num >= i) {//判断所有图像加载完成的条件
    　　　　　　　　$('.loading').fadeOut();
    　　　　　　　　}
    　　　　　　};
    　　　　oImg.src=img[i].src;

    　　　　})

    　　})
    </script>
    </head>
    <body>
    <div class="loading">
    　　<div class="pic">
    　　　　<span></span>
    　　　　<b>0%</b>
    　　</div>
    </div>
    　　<img src="http://i03.pic.sogou.com/45ae2054bc16d73a">
    　　<img src="http://i03.pic.sogou.com/fa3820a0be251630">
    　　<img src="http://i04.pic.sogou.com/2ea901dbf2999081">
    　　<img src="http://i03.pic.sogou.com/a53bcd45218a7330">
    　　<img src="http://i03.pic.sogou.com/9a9e8866b05cf32f">
    　　<img src="http://i03.pic.sogou.com/45ae2054bc16d73a">
    　　<img src="http://i03.pic.sogou.com/fa3820a0be251630">
    　　<img src="http://i04.pic.sogou.com/2ea901dbf2999081">
    　　<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1863935812,3262346880&fm=27&gp=0.jpg">
    　　<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=164104570,3489576029&fm=27&gp=0.jpg">
    </body>
    </html>

    效果图：

    源码文件下载：网页加载进度的实现.zip
  • 相关阅读:
    centos 挂载u盘
    如何将网站部署到tomcat根目录下
    seo工具
    mysql 1045 access denied for user********
    div 自适应宽度
    mysql 日志提示 is marked as crashed and should be repaired
    css overflow:hidden无效解决办法
    java 调用 .net webservice
    Java开发笔记（十五）短路逻辑运算的优势
    Java开发笔记（十四）几种运算符的优先级顺序
  • 原文地址：https://www.cnblogs.com/qikeyishu/p/7637773.html
Copyright © 2020-2023  润新知