jquery 页面加载loading

基础概念

jQuery 页面加载 Loading 是指在网页内容完全加载完成之前，显示一个加载动画或提示信息，以提升用户体验。这通常通过在页面加载时显示一个遮罩层或旋转图标来实现。

类型

全局 Loading：在整个页面加载完成前显示。
局部 Loading：仅在特定区域或组件加载时显示。
自定义 Loading：用户可以自定义加载动画的样式和内容。

应用场景

大型网站：对于内容丰富的网站，全局 Loading 可以有效提示用户等待。
单页应用（SPA）：在页面切换时显示局部 Loading。
数据密集型应用：在数据加载和处理期间显示 Loading。

示例代码

以下是一个简单的 jQuery 页面加载 Loading 的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Example</title>
    <style>
        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8) url('loading.gif') no-repeat center center;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div id="loading"></div>
    <div id="content">
        <!-- 页面内容 -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 模拟页面加载延迟
            setTimeout(function() {
                $('#loading').hide();
                $('#content').show();
            }, 2000);
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

问题1：Loading 动画不显示

原因：可能是 CSS 样式问题或 JavaScript 执行顺序问题。
解决方法：
- 确保 #loading 元素的样式正确，并且没有被其他元素遮挡。
- 检查 JavaScript 是否正确加载并执行。

问题2：Loading 动画一直显示

原因：可能是页面内容加载完成后没有正确隐藏 Loading 动画。
解决方法：
- 确保在页面内容完全加载后调用 $('#loading').hide();。
- 使用 $(window).load() 事件确保所有资源（如图片）都加载完成后再隐藏 Loading。

$(window).load(function() {
    $('#loading').hide();
    $('#content').show();
});

通过以上方法，可以有效解决 jQuery 页面加载 Loading 的常见问题，提升用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

基于jQuery，图片加载loading加载层动画开源库

简要说明 ProgressBar.js是一款jQuery图片加载loading加载层动画开源插件库。该插件库在图片加载时，为图片添加垂直的图片逐渐显示效果，非常炫酷。 ? ? ?...代码教程页面中引入 jquery.min.js"> jquery.progressbar.js"> HTML结构 <div id="divDuck1...backgroundOpacity: 1 }); javascript 普通垂直加载图片效果

1.9K2 0

三种页面Loading页面加载效果【全屏】

前言某些通过Ajax加载数据的页面，如果直接显示空白会给人突兀的感觉。如果加一个Loading的效果，会有大大不一样的效果哦。何为全屏？...我所谓的全屏就是将loading元素fixed，在最上面，而不影响页面本来元素的显示。...效果二波浪加载效果代码 CSS body { background-color: #ffff; } .page-loading { position: fixed;...: .4s; } .page-loading .loading .bar5 { animation-delay: .5s; } .page-loading .loading .bar6 {...效果三加载条效果代码 CSS body { background-color: #ffff; } .page-loading { position: fixed;

3.5K0 0

elementui的loading加载页面的使用方式

elementui的loading加载页面使用十分简单灵活，参考下面方式 this.loading=this....$loading({ lock: true, text: "正在连接......el-icon-phone-outline', background: 'rgba(0, 0, 0, 0.7)' }); 关闭对话框是下面 this.loading.close

1.3K2 0

EasyCVR页面添加Loading加载效果的实现过程

图片我们在开发过程中发现，在EasyCVR平台中，当加载后台时，因静态文件加载太多或网络质量差而导致长时间白屏事件：图片从上图可以看出，在EasyCVR加载时，左上角一直在转圈，下方一堆待处理的文件，页面一直白屏...于是针对该情况，我们进行了优化：在加载静态文件的同时，显示一个动画或者GIF。关于在加载静态文件的同时显示为动画还是GIF，团队内部也进行了技术上的交流讨论。...GIF也属于资源的一部分且文件较大会造成一丢丢时间的白屏，所以决定由前端通过css实现一个Loading动画。...动画样式代码参考如下：图片图片动画样式如下：图片完成动画后，需要在静态文件加载完毕时关闭Loading：图片完成上述主要代码，此功能完成。

7722 0

用jquery刷新或重新加载页面

2015-05-23 06:25:28 在网页开发过程中，经常会遇到需要重新加载或刷新页面，下面我来说一下如果通过jq来刷新或重新加载页面，来看代码。... 落帆亭 jquery-1.6.4.min.js"></script

7K1 0

网站建设（二）通用--页面刚加载时的loading效果

撇开如何优化加载资源不谈，在页面加载时，不论是有过多的加载资源，还是有一些提前处理逻辑。这一过程可能不希望用户看到，显示一个友好的loading会比较好一点。...当页面处理完毕后，再将loading移除。要想实现这个效果，首先要明白一个网页从加载（loading效果出现），到完全加载完成（loading效果消失）的整个过程。也就是何时出现，何时消失。...也就是说需要渲染完页面元素以后，显示loading才是正确的选择。所以引用外部的script，抑或所有的ajax，尽量写到body最后，在加载这些资源前，设置出现loading。...loading消失在页面全部加载完成后， window.onload = function(){ // 清除loading效果 } pace.js 也是一个不错的选择，这个之后会介绍到...，第一次加载页面的时候，有很长时间的空白（你如果打不开，应该能猜到是什么原因）。

2.2K2 0

原生js与jquery加载页面元素比较

原生js与jquery加载页面元素比较原生js：将获取元素的语句写到页面头部，会因为元素还没有加载而出错，js提供了window.onload 这个方法事先加载元素页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。...-3.4.1.min.js"> // 1 原生js加载页面元素，window.onload(...()方法 jquery加载页面元素通过ready()方法开发中常用jquery的ready简写写法使用jquery需要事先下载jquery库(压缩版和完整版，开发中加载压缩版即可，完整版用于平时读源码...)，用srcipt标签导入jquery库的压缩版使用jquery库需要另写一个script标签，在里面写jquery代码 ready比windown.load要快的原因是，window.load是等标签加载完

11.4K3 0

用jQuery模拟页面加载进度条

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？　　...我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载了多少，而后用jq模拟出一个进度条来显示。　　...为什么要这样，因为样式我们放head里的原因是保证页面加载第一步就把样式加载好，这样页面不会乱。而JS则不需要，再加上页面上大的文件主要也就是js，所以放在body里加载js是为了进度条考虑。　　...进度条画好了，jquery引用了，我们现在要写个方法，也就是可以让进度条动起来 var loading = function(a,b){ var c = b*1.5; if(b==100...(a,b)，两个参数分别是显示加载内容提示信息和加载进度百分比，然后，我用了其他几个js库做加载进度测试 loading('正在加载jQuery

2.1K1 0

jQuery页面加载完毕后执行事件

jquery的一种简写形式： alert("页面加载完成！")... onload必须等等页面中的图片、声音、图像等远程资源被加载完毕后才调用而jQuery中只需要页面结构被加载完毕。...jQuery中的页面加载完毕事件，表示的是页面结构被加载完毕。...; 也就是说页面加载时绑定，真正该触发时触发。...一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

21K4 0

CSS3的loading制作，让页面加载时不再单调

页面的loading效果一直都是个比较重要的制作，往往一个好的加载效果可以有效的提升用户体验。而实际开发中，loading效果具体该如何制作？前端工程师又会有哪些特殊的技能呢？...下图就是一个开发中常用到的loading效果展示。 ?..."> loading ....em:nth-child(1) { animation: fadeOut 1s linear 0.2s infinite; } .loading em:nth-child(2) {...animation: fadeOut 1s linear 0.6s infinite; } .loading em:nth-child(3) { animation: fadeOut 1s linear

2K9 0

各类加载loading动画效果

效果一：一、HTML Loading… 二、CSS /*绿色背景*/ body { background:#4ea980; margin...webkit-transform: rotate(360deg); transform: rotate(360deg); } } 效果二：一、HTML Loading...; } 100% { transform: rotate(360deg); } } 效果三：一、HTML Loading...2em 0 .5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 -.5em #FFF; } } 效果四：一、HTML Loading

2.9K3 0

懒加载(Lazy Loading) – MyBatis懒加载 – Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(Lazy Loading) 懒加载也叫“延迟价值”，核心思想是把对象的实例化延迟到真正调用该对象的时候...特别是在web应用程序中，它能够在用户滚动页面的时候自动获取更多的数据，而新得到的数据不会影响原有数据的显示，同时最大程度上减少服务器端的资源耗用。...(购买商品往下滑动才加载，一次只加载一部分，如果继续需要，再加载)【懒加载提高了系统响应时间，提升了系统性能】 – – [适用于单表查询提高效率，但是多表关联查询效率可能降低] MyBatis中懒加载的使用...具体使用懒加载就是通过fetchType=lazy实现懒加载 aggressiveLazyLoading配置为false，实现按需加载 --> 加载配置方式有两种：注解配置懒加载(@Lazy) xml中配置懒加载注解配置懒加载(@Lazy) 就是在类/成员变量/方法上加@Lazy注解，表示这个类/成员变量/方法是懒加载的

2K2 0

Hibernate延迟加载 lazy loading

延迟加载在Hibernate中是默认延迟加载；测试代码一： HibernateTest.java 代码： /** * */ package com.b510.examples; import java.util.Set...)+", description:"+category.getDescription()); 输出的是id，name和description属性值，其他的我们不管，所以Hibernate用了lazy loading...(延迟加载)，带来的好处就是我们不关心的数据，不用现在加载，当我们要用的时候，才去加载测试代码二： HibernateTest.java 代码： /** * */ package com.b510...ID: 1 name:java SE应用程序设计 price: 78.00 这里可以明确的告诉我们，当我们要加载Set集合的时候，这时候才去加载，而上面的例子，说明的是我们不加载的时候 Hibernate...就延迟加载取消延迟加载： Category.hbm.xml 代码： <?

1.1K2 0

网站添加Loading加载动画

Loading动画作用网站添加Loading动画可有效防止部分浏览器打开网页后因为有些静态资源还没有加载完毕导致的闪屏、白屏、花屏、错误排版等BUG 效果展示 Loading动画代码 loading-animation-center">loading-animation-center-absolute">loading_object..." id="loading_four">loading_object" id="loading_three">loading_object..." id="loading_two">loading_object" id="loading_one">{$("#loading-animation").fadeOut(540)},500)}window.jQuery?

1.8K2 0

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验，现在大多数网页都会在页面中加一个加载中效果，这里实现一个加载中逐渐消失的效果，以至于看上去不那么生硬。...html: loading">loading.gif" alt=""> css: /*加载中*/ #loading{...js: //loading加载中 //监听加载状态改变 document.onreadystatechange = completeLoading...},500).hide(1000); } } 给加载中效果默认opacity设为1，逐渐消失的效果则把opacity变为0，但是元素在页面中不消失...，这样会影响页面其他元素的点击使用，所以要把元素隐藏掉。

2.4K9 0

从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

3、jQuery对象.val();表示获取该对象 value 属性的值； 4、jQuery对象.val("值");表示设置该对象 value 属性的值；四、页面加载事件 1、DOM中页面加载事件...特点：整个页面的所有元素，文本，图片等全部加载完才会执行。...特点：整个页面的所有元素，文本，图片等全部加载完才会执行。...特点：不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。...$ 也可以换成 jQuery。特点：不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。

1.6K4 0

用于列表下拉加载loading动画

一、效果图弹跳加载二、实现代码 </view

3.6K4 1

浅谈vue+element全局loading加载

前言在我们的平时的工作中，在前后端交互的时候，为了提高页面的观赏性和用户的体验，我们会在页面上添加loading来阻止用户操作来等待接口的返回，这个时候我们会考虑到全局loading还是局部loading...boss，完成全局loading加载的封装 01 用到的插件 1、element-ui-->ui库 2、lodash--->高效的JavaScript库 3、axios--->基于promise的http...text: headers.text||"加载中……", //loading下面的文字 background: "rgba(0, 0, 0, 0.7)", //loading的背景色...target:headers.target||"body" //loading显示在容器 }); }; 03关闭loading 在关闭loading的时候小编为了防止loading...||"加载中……", background: "rgba(0, 0, 0, 0.7)", target:headers.target||"body" }); }; //关闭loading

6.8K5 0

vue 重新加载页面_页面重新加载

Vue刷新页面重新加载问题描述在加载同一路由页面的时候，vue的页面默认是不刷新的，需要重新加载数据解决方案修改App.vue 在路由视图上添加一个变量isRouterAlive判断显示实现重新加载...-- --> /* 这个脚本主要是用来刷新页面的 *...this.isRouterAlive = true }) } }, components:{ } } 在需要刷新的页面修改代码.../showDetail',query:{id:val}}); this.reload() } }, created(){ //加载数据...$message({type: "error",message: "加载数据出错:"+err, }) }); } } 版权声明：本文内容由互联网用户自发贡献，

4.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

jquery 页面加载loading

基础概念

相关优势

类型

应用场景

示例代码

可能遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐