开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用 jQuery，如何实现“页面加载”动画？

在使用 jQuery 实现“页面加载”动画时，可以使用以下步骤：

首先，确保已经在页面中引入了 jQuery 库。
创建一个包含动画内容的 HTML 元素，例如：

<div id="loading-animation">
  <img src="loading.gif" alt="Loading..." />
</div>

使用 CSS 设置动画元素的样式，例如：

#loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

使用 jQuery 的 $(document).ready() 方法在页面加载完成时隐藏动画元素：

$(document).ready(function() {
  $('#loading-animation').fadeOut('slow');
});

使用 jQuery 的 $(window).on('load', function() {...}) 方法在页面所有资源加载完成时隐藏动画元素：

$(window).on('load', function() {
  $('#loading-animation').fadeOut('slow');
});

完整的代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>页面加载动画</title>
 <style>
    #loading-animation {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
  </style>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="loading-animation">
    <img src="loading.gif" alt="Loading..." />
  </div>
  <!-- 页面其他内容 -->
 <script>
    $(document).ready(function() {
      $('#loading-animation').fadeOut('slow');
    });

    $(window).on('load', function() {
      $('#loading-animation').fadeOut('slow');
    });
  </script>
</body>
</html>

这样，在页面加载时，就会显示指定的动画元素，当页面加载完成后，动画元素会逐渐消失。

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

有帮助

没帮助

相关·内容

css实现页面加载动画

"> 正在加载中

3.8K3 0

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

为了获得更好的用户体验，现在大多数网页都会在页面中加一个加载中效果，这里实现一个加载中逐渐消失的效果，以至于看上去不那么生硬。...html: css: /*加载中*/ #loading{...gif的动态图，相对css，要更简单好用，多样化，但是gif图片容易太大，导致图片加载过慢，所以要到网上找一些在线压缩图片的地方压缩一下，尽可能不失真的情况下减小体积。...js: //loading加载中 //监听加载状态改变 document.onreadystatechange = completeLoading...opacity设为1，逐渐消失的效果则把opacity变为0，但是元素在页面中不消失，这样会影响页面其他元素的点击使用，所以要把元素隐藏掉。

2.4K9 0

JQuery 动画：为页面添彩的魔法

前言动画是网页设计的一种重要手段，它可以为静态的页面注入活力，使用户感受到更丰富的交互效果。而 JQuery 提供了丰富的动画功能，使得开发者能够轻松实现各种炫酷的动画效果。...JQuery 动画实际应用动画不仅仅是为了制造酷炫的效果，它还能够用于提升用户体验，例如在页面加载时显示渐变动画，或者在用户交互时添加平滑的过渡效果。下面我们来看几个实际应用场景。1....页面加载动画<!...模拟了一个页面加载的过程，延时3秒后，通过 fadeOut() 方法淡出加载动画，同时通过 fadeIn() 方法淡入页面内容，形成一个平滑的加载过渡效果。2. 用户交互动画<!...在实际应用中，巧妙地运用动画可以为页面增色不少，同时也要注意不要过度使用，以免影响用户体验。希望通过本篇博客，你能更好地理解和运用 JQuery 动画，为你的网页注入更多活力。

3061 0

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

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

1.9K2 0

如何使用Flutter实现58同城中的加载动画详解

前言在应用中执行耗时操作时，为了避免界面长时间等待造成假死的现象，往往会添加一个加载中的动画来提醒用户，在58同城中也不例外，而且我们并没有使用系统默认的加载动画，而是制作了一个具有58特色的加载动画...在本篇文章中，给大家分享下笔者使用Flutter实现58同城中加载动画的过程。先看一下加载动画的效果： ?...接下来开始写代码实现。由于动画是由一个圆弧不断变化组成的，如果使用Android，我们很自然的想到可以使用Canvas来进行圆弧的绘制，然后根据时间的变化不停地重新绘制圆弧，从而实现动画效果。...加载动画的实现了解了Flutter的动画后，再结合之前对加载动画流程的分析，加载动画可分成三个阶段，我们可以依赖Tween类，指定值的范围从0.0到3.0变化，当然也可以只使用AnimationController...至此整个动画的实现思路就清晰了：自定义加载动画的Widget，继承自CustomPaint类。

1.7K3 0

用jquery刷新或重新加载页面

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

7K1 0

网站页面滚动加载动画JS特效

终于尘埃落定了，前段时间忙的不可开交，结婚，工作，因为婚假+年假一起休的，导致很长时间没有更新博客了，今天抽空给大家带来了一个js特效，网站模块延迟加载的动画，假期之前就想着制作这个功能，页面滚动加载...简介和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。...scrollReveal(config); 动态HTML scrollReveal.init() 方法可以检测所有含有 data-scroll-reveal 属性的元素，并进行初始化，所以对于动态加载的元素...container'); container.innerHTML(data.newElementHTML); scrollReveal.init(); 其中高级自定义可以在后期加入，目前本站只是简单的加载动画...如果不喜欢这个可以试试wow.js，网站页面滚动加载动画JS特效（二）。

11.4K2 0

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

jquery的一种简写形式： alert("页面加载完成！")... onload必须等等页面中的图片、声音、图像等远程资源被加载完毕后才调用而jQuery中只需要页面结构被加载完毕。...jQuery中的页面加载完毕事件，表示的是页面结构被加载完毕。...所以，建议使用方式：样式控制的，比如图片大小控制，使用$(window).load()； jS事件触发的方法，可以在$(document).ready()里面加载。...; 也就是说页面加载时绑定，真正该触发时触发。

20.8K4 0

用jQuery模拟页面加载进度条

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？　　...我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载了多少，而后用jq模拟出一个进度条来显示。　　...0% 　　这时候注意了，我们要引用jquery库，引用的位置不是在head区域，而是紧接着html代码下面写。...为什么要这样，因为样式我们放head里的原因是保证页面加载第一步就把样式加载好，这样页面不会乱。而JS则不需要，再加上页面上大的文件主要也就是js，所以放在body里加载js是为了进度条考虑。　　...，然后，我用了其他几个js库做加载进度测试 loading('正在加载jQuery UI',30); <script type

2.1K1 0

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

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

11.4K3 0

jQuery实现图片懒加载

一、懒加载 1.什么是懒加载目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片...懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的自定义属性“data-src”（这个名字起个自己认识好记的就行）里，要用的时候就取出来，把它的值赋值给img的src...三、如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。...jQuery实现懒加载 <!...2.当滚动页面时，检查页面所有的img标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时再去判断它是否已经加载过，如果没有加载，加载它 */

13.6K2 0

网站页面滚动加载动画JS特效（二）

昨天发布了网站页面滚动加载动画JS特效，但是加载的页面并不怎么完美，文章页面不能直接加载出来，需要滚动条继续下来，可能是没有调节js导致的，所以今天又重新测试了wow.js，感觉这个不错，很喜欢，有兴趣的可以测试下...页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面（查看）。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。...浏览器兼容 IE10+ Chrome Firefox Opera Safari IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll...使用方法 1、引入文件（自带的css样式） 2、HTML（给需要滚动动画的div增加两个css属性） <div...是否在移动设备上执行动画 live 布尔值 true 异步加载的内容是否有效这个跟上次的不太一样，引入了css+script其他步骤相同，其他功能未测，大家可以自己DIY。

7.4K3 0

cssjshtml 弹窗加载动画实现

layer弹窗加载动画实现: 延迟3秒加载加载动画... <script src="/static/js/...this).attr('href'); layer.ready(function(){ layer.open({ type: 2, title: '\<em>加载</em><em>动画</em>展示

1.6K4 1

CSS 3.0实现加载动画

给大家分享一个用CSS 3.0实现加载动画，效果如下：以下是代码实现，欢迎大家复制、粘贴和收藏。 CSS 3.0实现加载动画

6783 0

Android 使用 Path 实现搜索动态加载动画效果

今天实现一个搜索动态加载数据的动画效果,还是先看效果吧,用文字描述干巴巴的,看图说话什么都明白了, ?...实现这个就是使用Path中的getSegment()不断的去改变它截取片段的start和stop,再结合动画,今天就分步骤实现它,看完以后你也会觉的不是很难,只是没想到这么实现而已,所以要多见识,所谓眼界决定你的高度...如果是绘制圆的话,上面的线起点和终点位置怎么去计算,这是个问题,但是我们绘制圆还可以使用绘制椭圆的形式也是可以绘制达到圆的效果,从45度开始绘制一个圆,是不是这个线的起点搞定了,分析图如下： ?...哪我们只要改变startD这个离起始点的位置值就ok,当然有很多种方法,但是Android中基本上都是使用值动画,ok,根据这个思路实现这个第二步逻辑： package com.tuya; import...github: https://github.com/zhouguizhi/PathSearch 总结以上所述是小编给大家介绍的Android 使用 Path 实现搜索动态加载动画效果，希望对大家有所帮助

1.3K2 1

Element 中使用加载动画

// 1.引入动画组件 import { Loading } from 'element-ui'; export default { name:"index", data...生成动画 this.loadingInstance = Loading.service({ // 动画中的文字 text...:'加载中', // 要加载动画的容器 target:'.app-container' });...请求完成后关闭动画 this.loadingInstance.close(); } });

1.4K3 0

仅使用CSS，带你创建一个漂亮的动画加载页面

你会问“为什么” 首先，这是一篇关于CSS、伪元素、关键帧动画以及利用这些工具可实现哪些效果的文章。我不认为每个Web App都需要一个加载/启动界面，也不准备在本文中说服你相信这个。...我最近的一个项目中，在它加载好可用之前，第一步要做的是加载一段视频和几张图片。我不想立即显示内容，因为用户可能很快就要向下滚动界面，（页面未加载完）而不能享受完整的体验。...为了实现它，我们只使用了HTML和CSS，没有使用任何额外的技术。 ---- 如何构建它你想要构建的加载界面因设计的不同，构建过程也会不一样。为了更具有普适性，我将以我的设计为例。...使用animation-direction: alternate; 可以实现动画的反向执行，从而完成第3步和第4步的构建。...使用animation-iteration-count: infinite;可以实现动画的不断重复。让我们从以下基本的HTML开始： <!

2.4K2 0

5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

2.6 CSS3动画(animation) 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。...动画的基本使用： 1 定义动画 2 调用定义好的动画定义动画语法 @keyframes 动画名称 { 0% { width: 100px; } 100% { width:...200px } } 使用动画语法 div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration...: paused; 经常和鼠标经过等其他配合使用要想动画走回来，而不是直接调回来：animation-direction: alternate 盒子动画结束后，停在结束位置：animation-fill-mode...DOCTYPE html> 加载动画：公众号AlbertYang <link

2.2K1 0

Android实现页面滑动切换动画

本文实例为大家分享了Android实现页面滑动切换动画的具体代码，供大家参考，具体内容如下实现两个页面滑动切换，一些相册的效果也是如此一个Activity的界面配置文件 activity_main.xml...anim/文件夹下有 enter_lefttoright.xml和enter_righttoleft.xml out_lefttoright.xml和out_righttoleft.xml 四个动画配置文件...-- 这里用到了平移动画,这里只动x轴坐标就可以了 -100%p:这就是屏幕的宽度:这里的p代表parent,父元素的宽度,都是手机屏幕宽度,第一页要从-100%p移动到0,持续5秒中....，切换页面，用手向左滑动，整个页面向左慢慢滑动，切换页面。...（将配置文件换成其他的动画效果也可以，本例子使用的是移入移出的动画效果）以上就是本文的全部内容，希望对大家的学习有所帮助。

2.8K4 0

自定义动画函数JQuery实现

width: 100px; height: 100px; background: green; } $(function(){ // $('div').animate(字典的形式写动画过程, 动画所需时间..., 运动曲线, 回调函数) // 1、动画过程：{} -- css多属性写法相同 // 2、时间以毫秒为单位, 600 // 3、运动曲线：swing...linear // 4、回调函数：就是匿名函数function(){} -- 作用：当动画完成之后执行的命令 $('div').eq(0).animate({'width...':'800px', 'height':'300px','background':'red'}, 1000, 'swing', function(){ alert('动画完成了'

6103 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭