load（）局部刷新和NProgress进度条

最新推荐文章于 2022-08-09 22:37:30 发布
最新推荐文章于 2022-08-09 22:37:30 发布
阅读量448 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43618136/article/details/104428948
版权

load（）局部刷新

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="../nprogress.css">
  <style>
    .loading {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, .6);
      font-size: 30px;
    }
  </style>
  <script src="../nprogress.js"></script>
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
          <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
          <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
        </div>
      </aside>
      <main id="main" class="col-md-9">
        <h2>我的个人资料</h2>
        <hr>
      </main>
    </div>
  </div>
  <div class="loading">正在玩命加载中...</div>
  <script src="../jquery.js"></script>
  <script>
    $(function ($) {
      // $(document)
      //   .ajaxStart(function () {
      //     // 只要有 ajax 请求发生 就会执行
      //     $('.loading').fadeIn()
      //     // 显示加载提示
      //     console.log('注意即将要开始请求了')
      //   })
      //   .ajaxStop(function () {
      //     // 只要有 ajax 请求结束 就会执行
      //     $('.loading').fadeOut()
      //     // 结束提示
      //     console.log('请求结束了')
      //   })

      $(document)
        .ajaxStart(function () {
          NProgress.start()
        })
        .ajaxStop(function () {
          NProgress.done()
        })

      // 有一个独立的作用域，顺便确保页面加载完成执行
      $('.list-group-item').on('click', function () {
        var url = $(this).attr('href')
        $('#main').load(url + ' #main > *')
        return false
      })
    })
  </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div  class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
          <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
          <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
        </div >
      </aside>
      <main id="main" class="col-md-9">
        <h2>我的购物车</h2>
        <hr>
      </main>
    </div>
  </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div  class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
          <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
          <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
        </div >
      </aside>
      <main id="main" class="col-md-9">
        <h2>我的订单</h2>
        <hr>
      </main>
    </div>
  </div>
</body>
</html>
广东话的蛇皇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LoadProgressBar
02-02
QT实现自定义加载进度条，仿照Android加载时的进度条。样式可以改变，默认是线式。
利用原生javascript实现进度条（可做页面头部进度条，或者局部进度条均可）
06-07 144
1 <div class="top-progress" id="js-top-progress"></div> <!--结构只有一句话即可--> 2 <script src="./static/js/progress.js"></script> 3 <script type="text/javascript"...
通过NProgress来进行页面上方的加载条显示
qq_44774831的博客
04-25 309
效果：（网页中得到这样一个加载效果） 第一种方法：在项目的路径下启用vue的可视化面板 在依赖-运行依赖中输入nprogress来下载（如图） 第二种方法，进入nprogress的github.(如图) 在命令行下输入npm install --save nprogress 1.1没有使用vuex的直接在main.js中输入 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 然后在你的request和response
预加载时的进度条
沫沫酱
07-28 2695
这个是真实的数据加载显示的进度条 不是单纯的当一个gif的loading图片 使用的是微信提供的资源预加载方法 http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93 结合实例 首先引入
实现微信和QQ图片加载显示进度的效果-LoadingProgress
peng83508440的博客
10-25 2207
分析从网络上加载图片是一种耗时的操作,当加载的图片体积越大,消耗的时间也会更长。向ImageView添加一个进度条的话,可以起到一定的效果。
thymeleaf局部刷新解决方案.docx
08-05
相信很多朋友在利用thymeleaf进行开发/学习时，遇到一个困境，想要通过th:replace和变量表达式进行联动，实现页面局部刷新，但是总会报错找不到对应模板，明明相同的字符串可以生效，但是用了变量表达式就会失败，...
用Jquery.load载入页面实现局部刷新
10-26
用jquery.load的方法载入新的页面，以实现局部刷新，可结果发现载入进来的页面与原来单独的页面不一样，样式没了，关于这个问题，下面有个不错的解决方法
UpdatePanel和jQuery不兼容 局部刷新jquery失效
10-26
在ASP.NET Web Forms开发中，UpdatePanel是一种常用的控件，用于实现页面的无刷新更新，即局部刷新。然而，UpdatePanel与jQuery之间的交互有时会出现问题，尤其是在涉及到DOM元素操作时。这个问题的核心在于...
vue配置nprogress实现页面顶部进度条
01-19
本文实例为大家分享了vue配置nprogress实现页面顶部进度条的具体代码，供大家参考，具体内容如下 1. 安装 npm install nprogress --save 2. 在main.js中导入 源码~~~~~~方便你复制  // The Vue build version to...
极致体验ajax局部和整体刷新
10-23
本篇文章将向大家介绍如何通过jquery的load方法进行局部刷新，通过封装三个属性然后我们来使用，以此达到我们想要的效果，本文写的非常好，感兴趣的朋友一起看看吧
nProgress的简单使用
最新发布
cjhxydream的博客
08-09 904
nProgress的简单使用
网页加载进度条--6种
热门推荐
Blog
10-04 1万+
这里介绍6中网页加载进度条 另外发现两个很有意思的网站：http://autoprefixer.github.io/    css3兼容代码                                                    https://preloaders.net/    定义自己喜欢的gif图片 整体思路： 1. 设置遮罩层  和  进度加载图片（可以用c
jqLoading加载进度条使用
自由的刺猬
12-30 3899
jsp页面中要引入jquery-ui-jqLoding.js文件，才可以用这个加载进度条，自行百度下载哈~~ 假设你的页面中已经引入了该js文件，当你用ajax方式提交数据的时候，万一响应时间有点长，可以用这个插件，这样用户体验不会太差。js代码如下： var fd = new FormData(document.getElementById("testForm")); var excelFi
nprogress页面加载进度条使用
云淡风轻，笑看人生
08-06 1万+
安装 依赖于 jQuery (1.8版本及以上)，添加 nprogress.js 和 nprogress.css 到你的项目中。 使用方法 NProgress.start() — 显示进度条 NProgress.set(0.4) —设置百分比 NProgress.inc() — 增加一点点 NProgress.done() — 完成进度条
ProgressLoadingView带进度的加载动画
imurluck的博客
06-15 1333
提笔 　　难以提笔，不知如何编写才能将此控件描述清晰。思考良久，觉得与其详细扣代码细节，还不如讲解一下实现原理、架构设计的逐步形成以及整个心路历程。当然想要扣代码细节的请戳这里Gayhub仓库。 简述 　　这是一款带有进度的加载动画，可以定制不同的style。注:阅读本文需要有一定自定义View基础。 效果图 ​ 　　此控件目前提供了两种样式，分别于效果图中左侧和右侧，颜色和背景色可...
为什么casperjs比phantomjs好
11-20 4354
casperjs
jQuery--data、load、then、done、getJSON、$.fn.extend
DcTbnk的博客
06-16 354
1. .data() 创建自定义属性 及获取自定义属性 2. .load() 将其他网页内容放入想要放入的网页中，同时也可修改它的样式 3. .done() .getJSON() 4. $.fn.extend() 在jQuery中创建实例方法 一.data <!-- html --> <h1>biaoti</h1> <h1>biaoti</h1> <p data-id="10001">ppp&
刷新页面加载动画效果NProgress
suiyuest的博客
07-01 251
刷新页面加载动画效果NProgress
http_load压测工具 常见的错误处理
lijian965644856的博客
07-04 969
byte count wrong http_load在处理时会去关注每次访问同一个URL返回结果（即字节数）是否一致，若不一致就会抛出byte count wrong ,所以动态页面可以忽略这个错误信息。或者可以对代码做修改http_load.c 将 “stderr, "%s: byte count wrong\n", urls[url_num].url_str );” 修改为：“stderr...
ASP.NET UpdatePanel 实践指南：局部刷新与属性解析
"这篇文档详细介绍了如何使用ASP.NET中的UpdatePanel控件来实现无刷新的局部更新功能。UpdatePanel是ASP.NET AJAX控件之一，它允许网页的部分内容在不重新加载整个页面的情况下进行更新，提高了用户体验。" 在ASP...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值