【前言】
今天介绍个loading实现效果的原理和方法吧。记得之前考研网的项目里用过,这里再总结个案例
这里做的案例效果是渐隐藏的效果,看上去更加自然。
【主体】
有两种方式的js来控制
(1)页面所有元素DOM节点和其他所有文件都加载完毕
window.onload = function(){...}
(2)jQuery方法
$(document).ready(function(){...})
【区别】
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})
这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。
而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。
【建议】
这里我建议用jquery的方法,只要加载完文档树即可。否则会影响用户体验
【案例】
/*loading加载*/ .loader { position: fixed; z-index: 9999; width: 100%; height: 100%; background: rgba(255,255,255,0.9); text-align: center; /* loader页面消失采用渐隐的方式*/ -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; } /* 使用base64编码嵌入加载的logo */ .loader-content { background:none; display: block; position: relative; padding-top: 50px; top: 45%; } .fadeout { opacity: 0; filter: alpha(opacity=0); } /* logo出现动画 */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); } } /*加载end*/ <!--loading page--> <div class="loader"> <div class="loader-content"> <img src="../static/imgs/loading.gif" alt="Loader" class="loader-loader"/> </div> </div> $(function(){ setTimeout(function(){ var loader = document.getElementsByClassName("loader")[0]; loader.className="loader fadeout" ;//使用渐隐的方法淡出loading page setTimeout(function(){loader.style.display="none"},500) },500)//强制显示loading page 1s })
.
相关推荐
这个“纯css3 loading线性圆形加载动画特效源码.zip”文件提供了一种利用CSS3创建动态加载动画的方法,特别适合在网页加载数据时展示进度,以提高用户体验。下面我们将深入探讨CSS3中的关键知识点,以及如何制作这种...
"10种css3网页loading预加载动画特效源码.zip"这个资源提供了实战案例,供开发者参考和学习。在实际开发中,可以结合JavaScript(如jQuery)和服务器端技术(如ASP)进行更复杂的功能集成和状态控制,以实现更完善的...
这是一款有关网页图片延迟加载的小案例,主要包括了图片随滚动条延迟加载、整个页面loading延迟加载、图片延迟加载、iframe打开页面延迟加载的技术。通过延迟加载技术可以提升网站的性能,有需要的朋友可以下载看看...
在网页设计中,"正在加载页面中"通常指的是在页面内容完全加载之前向用户展示的一种交互反馈。这种效果可以提供给用户一个明确的信号,让他们知道网站正在努力获取信息,并且即将呈现完整的页面。在本案例中,我们...
本案例中,我们探讨的是一个相对完善的JS实现的加载等待效果。通过提供的资源,我们可以看到包括一个HTML页面(ajax-loader.html)、一个JavaScript文件(darale.js)以及一个动态加载图标的GIF文件(ajax-loader....
"纯css3制作的发光loading图标加载动画特效源码.zip"这个压缩包包含了一个利用CSS3技术实现的加载动画效果。加载动画通常在网页内容加载时显示,以告知用户页面正在处理信息,提高用户体验。 首先,我们来详细了解...
在这个"Vue vant 上拉加载 下拉刷新实际案例源码模板"中,我们将探讨如何使用 Vant 的上拉加载(LoadMore)和下拉刷新(PullRefresh)功能来增强用户体验。 1. **Vant LoadMore组件**: Vant 的 LoadMore 组件主要...
这个压缩包中的内容是关于使用HTML5 Canvas实现的Loading形状加载动画特效的源码,对于学习和理解Canvas的动画制作具有很高的参考价值。 1. HTML5 Canvas基础: HTML5 Canvas是一个二维绘图API,它提供了丰富的...
在本文中,我们将深入探讨WPF(Windows Presentation Foundation)中的加载(Loading)效果,并通过一个名为"LoadingDemo"的示例项目,了解如何实现高效且可定制的加载动画。WPF是.NET Framework的一个重要组成部分...
这种特效能够为网站增添现代感和动态性,提高用户体验,尤其是在用户等待页面加载时提供视觉反馈。让我们深入了解一下实现这个特效的关键技术和步骤。 首先,CSS3是CSS(层叠样式表)的第三个版本,引入了许多新的...
在本资源中,"CSS3+JS实现iOS8风格loading加载进度条特效源码.zip" 提供了一种利用现代Web技术来创建具有苹果iOS8风格的加载进度条效果的方法。这个压缩包包含了一个名为 "132677967333942036" 的文件,这很可能是一...
此压缩包“纯CSS3实现的绿色Loading加载动画特效源码.zip”提供了使用CSS3技术创建的绿色加载动画效果的源代码。这个加载动画通常用于网站或应用中,向用户显示数据正在加载的过程,提升用户体验。 1. CSS3关键帧...
【标题】中的“纯css3实现的音阶波浪loading加载动画特效源码”表明了这是一个使用CSS3技术创建的动态加载效果,它以音乐音阶和波浪为设计元素,为用户展示一种视觉上吸引人的加载过程。在网页开发中,加载动画是...
本资源"css3 svg实现的三角形图标变换loading加载动画特效源码.zip"提供了使用这两种技术实现的动态加载动画示例,这在现代网页设计中非常流行,可以提升用户体验。 首先,CSS3是Web样式语言CSS的最新版本,它引入...
在Flash开发中,loading是预加载过程的一部分,它允许用户在等待内容完全加载的同时看到进度提示。加载界面通常包含进度条、图标或其他视觉元素,以提供加载状态的反馈。在这个特定的案例中,开发者创新地使用了箭头...
这个加载动画以圆点形式呈现,具有发光效果,为用户提供了一种视觉上的反馈,表明页面正在加载内容。下面将详细介绍如何利用CSS3来实现这种效果,以及其中可能涉及到的关键技术。 首先,CSS3是CSS(层叠样式表)的...
在本资源中,"JS + CSS3 实现漂亮的七色风车形Loading加载动画效果源码.zip" 提供了一个利用JavaScript(JS)和CSS3技术创建的动态七色风车加载动画。这种加载动画通常用于网页或应用在内容加载期间为用户呈现视觉...
**jQuery遮罩Loading加载特效**是网页开发中常用的一种用户体验优化技术,主要用于在页面内容加载过程中展示一个半透明的遮罩层,同时显示一个“加载中”的提示图标或文字,以告知用户页面正在处理数据,避免用户在...
在本资源中,我们关注的是一个使用纯CSS3实现的动态Loading加载特效,该特效仅仅通过六个`<span>`标签来构建。这个源码提供了一种高效、轻量级且可自定义的方法来创建视觉吸引人的加载动画,适用于网页或应用的加载...
这包括使用SVG矢量图、压缩图片、代码精简、延迟加载(lazy loading)、缓存利用等技术,以保证页面在各种设备上的流畅加载。 7. **SEO友好** 良好的H5模板会考虑到搜索引擎优化(SEO),使用语义化的HTML元素,...