zoukankan      html  css  js  c++  java
  • jQuery 页面载入进度条

      页面 Loading 条基本人人都会用。它的原理很简单:在页头放置一个文字或者图片的 loading 状态,然后页尾载入一段 JS 隐藏掉,即根据浏览器的载入顺序来实现的简易 Loading 状态条。

    loading Process traditional

    上图展示了传统 Wordpress 模板在浏览器中的载入顺序,Loading 条的出现和消失分布于头尾。

    new loading bar

    如果我们在页面的不同位置放置多个 JS ,每个 JS 用于逐步增加 Loading 条的宽度,那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感,同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果,其完全可以与浏览器自带的状态条媲美。

    先来看一个演示:地址

    Code

    要得到演示上的进度条效果,首先,引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置:

    <div id="loading"><div></div></div>

    CSS 可以这么写:

    #loading {
    100px;
    height:20px;
    background:#A0DB0E;
    padding:5px;
    position:fixed;
    left:0;
    top:0;
    }
    #loading div {
    1px;
    height:20px;
    background:#F1FF4D;
    }

    准备工作到这里就做好了。

    接着,请随意发挥,依照你对图二的理解,在模板各个部分的适当位置放置:

    <script type="text/javascript">
    $("#loading div").animate({"16px"})
    </script>

    其中红色数值应该随载入顺序逐步增加,直到 footer.php。另外别忘了在 footer.php 最末尾放上:

    <script type="text/javascript">
    $("#loading").fadeOut()
    </script>

    用于载入完毕后隐藏进度条。

    转自:http://ishawn.net/tips/loading-status-bar.html

  • 相关阅读:
    前端vscode比较好用的保存自动格式化settings.json配置
    jvm 调优
    ElasticSearch CPU和内存占用高的优化记录
    nginx 安装部署
    Windows 下Redis的部署 及key 过期事件
    Docker 部署应用过程记录
    实现鼠标悬停,div勾画div边框的动画
    html+jquery实现简单图片裁剪
    css+jquery 实现图片局部放大预览
    flex 布局 实现电商网页菜单的多级分类展示
  • 原文地址:https://www.cnblogs.com/LCX/p/1506002.html
Copyright © 2011-2022 走看看