前端loading效果的实现

最新推荐文章于 2024-07-24 10:22:02 发布
最新推荐文章于 2024-07-24 10:22:02 发布
阅读量1.7w 收藏 16
点赞数 4
分类专栏： web前端 文章标签： loading 前端 用户体验 移动 解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyc335171398/article/details/52292869
版权

说到页面loading效果，现在各种PC端和移动端的应用使用loading都十分的广泛，这是因为页面的加载时需要时间的，如果页面加载很快，loading的作用可能还不是特别能够体现，但是如果当页面加载速度不是很快甚至很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）那么就会十分的影响用户体验，页面加载所需要时间越长，那么可能损失的用户量就会多。所以在恰当的时候使用loading是解决网页加载缓慢时与用户交互的最好解决方案。下面就说一说笔者本人如何实现页面loading效果的。如有大家更好的解决方案，也可以分享出来。

简单loading效果的实现

loading直译就是正在加载中的意思，也就是在页面加载的时候loading效果要出现，页面加载完成的时候让其消失。那么以什么来判断页面加载完成为节点去取消loading效果很重要，DOM元素加载完成，还是页面中的所有关联文件（包括图片），jquery给出了两个函数来判断这两个节点， $(document).ready()是在页面上所有DOM元素加载完毕后才执行$(window).load();方法是在网页中所有的元素（包括元素的关联文件）完全加载到浏览器后才执行，如何选择则看实际情况去选择，笔者使用的是$(window).load()方法，因为页面上一般来说图片的加载最耗费时间，弄清楚这个的话，实现起来就不复杂了，在页面<body>标签的顶部来添加loading层，以为DOM元素的加载时从上往下的，放在最顶部可以保证loading效果会最早出现。 
<div id="loading">
  <img src="photos/loading/2.gif" class="img-responsive">
</div><pre name="code" class="css">
#loading
{
	position:fixed;
	top:40%;
	left:45%;
	z-index:999;
}
加载的动态图可以自己定义，但是越小越好，以为页面中图片的加载时无序的，动态图太大，可能加载不出来，导致效果无法实现。loading效果出现后，在页面加载完成后，就要让其消失。 
 
 
$(window).load(function(){
	//适当延迟隐藏，提高loading效果
	//$('#loading_all').delay(1000).hide(0);
	$('#loading_bottom').hide(0);
});
 
 
 
 
 
 到这里一个简单的loading效果就完成了，如果不想在每个页面中都加入loading层，那么可以写一个通用的方法，在页面初始化的时候，向页面中插入loading层。 
 
var str = "";	
str+="<div id=\"loading\">";
str+="   <img src=\"${ctx}photos/loading/2.gif\" class=\"img-responsive\">";
str+="</div>";
var htmldata = str;
$ ('body *:first').before(htmldata);
 

 

 
 下面提供一种针对ajax请求loading效果实现的方法，仅供参考。 
 
$(window).load(function(){
	//为ajax绑定loading_bottom
	$(document).ajaxStart(function(){
		$("#loading").show();//在ajax请求开始的时候启用loading
	}).ajaxStop(function(){
		$('#loading').hide(0);//在ajax请求结束后隐藏loading
	});
});
 
 
仿部分原生APPloading效果的实现
 

 

大家可以看到部分原生APP的loading效果是在加载的时候好像先进入一个loading页面，在目标页面加载完成后，才跳转到另一个页面，在加载过程中你是看不到需要加载的页面情况的。那么这个效果应该如何实现？
 

首先想到的就是在页面顶部加入一个loading层，这个层的高度和宽度和页面的高度和宽度应该一样，并且遮盖着这个页面，在这个层的中间加入loading图或者CSS3写的loading效果，简单的思路成型了。
 

<div id="loading_all">
         <div>
             <img src="photos/loading/1.gif" class="img-responsive">
         </div>
</div>
 

#loading_all
{        width:100%;
        height:100%;
        position:fixed;
        z-index:999;
        background-color:white;
}
 

#loading_all div
{
      position:absolute;
    width:60px;
    height:60px;
    top:50%;
    margin-top:-60px;
    left:50%;
    margin-left:-30px;
}
 

 
在页面顶部加入loading层之后，那么整个真实加载的页面就被遮盖了，但是如果下层的页面高度是高于整个屏幕的高度，那么就会出现滚动条，用户在加载的时候是可以拖动滚动条的，虽然loading层的定位是使用fixed,但是还是会影响一些效果，那么这个时候我们就需要在页面加载的时候禁用滚动条，然后再页面加载完成，取消loading效果的时候再恢复滚动条。禁用滚动条就在<body>标签上加上class="scoll_dis" 

 

 

/*滚动条禁用*/
.scoll_dis
{
	overflow:scroll;
	overflow-y:hidden;
}
 

页面加载完成后恢复滚动条。
 

$(window).load(function(){
	$('#loading_all').delay(300).hide(0);
	setTimeout(function(){
		$('body').removeClass("scoll_dis");
	},300);
});
 
PC端的loading效果就完成了，为什么说PC端，是因为以上禁用滚动条的方法在移动端是无效的，屏幕还是可以被拖动。所以针对移动端，在页面加载时要禁止屏幕的触摸事件，加载完成后要恢复触摸事件。 

//阻止触摸事件
document.addEventListener("touchmove", myFunction);
function myFunction(e) {
	e.preventDefault(); 
}
 

//解除触摸锁定
document.removeEventListener("touchmove", myFunction);
 

 

 

 
这样一个兼容移动端的效果就实现了。
                

        

        

    

  


    

      

        

            

              
                
                  MangoDQ
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
前端1 --- loading实现方法

				
			

			

				

					Lachesis_的博客
				

				

					12-30
					
					730
					
				

			

		

		

			
				
1. 首先
state添加一个loading属性，
得到数据 或者 网络不错 --> loading设置为false，
没有数据 或者 网络不好 --> loading设置为true，
在渲染部分判断loading，
loading为 false  —> 记载正常页面，
loading为true   —> 加载loading画面，

2. 简单loading模板
import React from 'react'


export default class Loading exte

			
		

	



                

              
                



	

		

			

				
					
前端Loading样式

				
			

			

				

					09-06
				

			

		

		

			
				
web开发
常用CSS样式
感觉不错，可以看看
loading.... 的效果

			
		

	



                


  
              

                


	

		

			

				
					
最简单完美的纯前端loading实现

				
			

			

				

					vileman的博客
				

				

					03-11
					
					361
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body {
     .

			
		

	





	

		

			

				
					
【css3动画】分享几组手写Loading...加载中...样式

					
最新发布

				
			

			

				

					一位前行者的博客
				

				

					07-24
					
					681
					
				

			

		

		

			
				
在网页开发中，加载动画是提升用户体验的重要元素之一。本文将分享三种不同的Loading…加载中…样式，每种样式都具有独特的视觉效果和动画表现。你可以根据自己的项目需求选择合适的样式，或者将它们作为灵感来创建自己的加载动画。

			
		

	



		

			
		



	

		

			

				
					
web前端——loading效果

				
			

			

				

					tingyu_的博客
				

				

					07-29
					
					1041
					
				

			

		

		

			
				
效果如下：8个小圆点一直的这样转动



8个小点的生成方式：

将8个小圆点分别放在2个盒子上，一个黑子放4个，分别放在4个角上，然后第2 个盒子旋转45度，将两个盒子重叠到一起，就可以生成这个8个小圆点了。

具体代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=dev.

			
		

	





	

		

			

				
					
前端之loading效果实现

				
			

			

				

					qq_597221342的博客
				

				

					07-01
					
					3444
					
				

			

		

		

			
				
首先分享两个loading的网站，https://loading.io/，https://icons8.com/preloaders/，可以在网站上找loading，也可以自己用css实现loading效果，css浏览器前缀可以通过http://autoprefixer.github.io/这个网站转换

接下来直接上代码

html:

&amp;amp;lt;div class=&amp;quot;loading&amp;quot;&amp;amp;gt;
 ...

			
		

	





	

		

			

				
					
前端常见的loading效果

				
			

			

				

					About_zero的博客
				

				

					05-05
					
					573
					
				

			

		

		

			
				
【代码】前端常见的loading效果。

			
		

	





	

		

			

				
					
分享一个有趣的前端Loading效果（前端loading）

				
			

			

				

					weixin_65793170的博客
				

				

					04-16
					
					765
					
				

			

		

		

			
				
前端中的“loading”通常指的是页面加载过程中的加载状态，用于向用户显示页面正在加载的提示。它可以是一个旋转的加载图标、进度条、动画等形式，目的是为了让用户知道页面正在加载，并且等待的时间可能会持续一段时间。

			
		

	





	

		

			

				
					
前端翻书加载loading效果demo可直接使用

				
			

			

				

					06-01
				

			

		

		

			
				
电子图书翻页加载loading,电子书在加载的时候使用这个功能

			
		

	





	

		

			

				
					
CSS3轻松实现清新 Loading 效果的简单实例

				
			

			

				

					09-27
				

			

		

		

			
				
这个实例通过改变元素的高度和背景颜色来实现Loading效果。HTML结构包含五个`<span>`元素，它们被设置为行内块级元素并排列在`<div class="loading">`内。CSS样式如下：  1. `.loading`设置了宽度、高度、居中对齐...

			
		

	





	

		

			

				
					
前端各种交互效果——loading 加载效果

				
			

			

				

					qq_44503730的博客
				

				

					01-10
					
					1313
					
				

			

		

		

			
				
效果1


源码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root

			
		

	





	

		

			

				
					
js实现页面加loading提示效果

				
			

			

				

					05-05
				

			

		

		

			
				
js实现页面加loading提示效果,只需要将js引入，然后再需要的时候调用showLoading().当业务逻辑处理完毕后调用completeLoading（）就可以关闭loading。非常方便、比较好用。

			
		

	





	

		

			

				
					
基于javascript实现页面加载loading效果

				
			

			

				

					10-22
				

			

		

		

			
				
本篇文档主要介绍如何使用JavaScript技术来实现网页在加载过程中的loading效果。通过这种方式，可以在网页内容还未完全加载完毕时，给用户显示一个加载中的提示，提升用户体验。  首先，文档中展示了HTML的基本结构...

			
		

	





	

		

			

				
					
loading效果

				
			

			

				

					12-19
				

			

		

		

			
				
在前端开发中，"loading效果"是用户交互过程中的一个重要组成部分。它通常指的是网页或应用在加载内容时显示的一种动画效果，旨在告知用户系统正在处理数据，提高用户体验，避免用户因等待而产生的不耐烦。CSS...

			
		

	





	

		

			

				
					
三种 Loading 制作方案

				
			

			

				

					小生方勤
				

				

					01-03
					
					464
					
				

			

		

		

			
				
作者：JS_Even_JS来源：https://segmentfault.com/a/1190000038692080一、简介Loading几乎是每个应用都会用到的一个组件。很多组件库都...

			
		

	





	

		

			

				
					
页面加载中效果实现

				
			

			

				

					Yannis的技术之路
				

				

					03-13
					
					166
					
				

			

		

		

			
				

1、加载的loading.css
@charset "UTF-8";
/* LOGIN CSS */

.background { 
	display: block; 
	width: 100%; 
	height: 100%; 
	opacity: 0.4; 
	filter: alpha(opacity=40); 
	background:#f1f1f1;
	posi...

			
		

	





	

		

			

				
					
CSS3实现1前端常用Loading效果

				
			

			

				

					weixin_30646315的博客
				

				

					03-08
					
					95
					
				

			

		

		

			
				
此页动画效果都是gif图的，不想用代码写的话，下载图片就可使用。
第1种效果：

代码如下

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <sp...

			
		

	





	

		

			

				
					
前端页面加载Loading动画

				
			

			

				

					pscool的博客
				

				

					03-16
					
					2076
					
				

			

		

		

			
				
在vue中，可以直接写在index.html的id为app的div里面，因为后面vue加载完成后，会替换掉里面的元素。

			
		

	





	

		

			

				
					
网页Loading效果

				
			

			

				

					weixin_30847939的博客
				

				

					03-29
					
					245
					
				

			

		

		

			
				
问题描述:由于项目要求在页面提交以及加载的时候，有短暂的卡顿，需要用loading过渡。
1.下一个页面加载的时候实现：
base-loading.js

//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
    _PageWidth = document.documentElement....

			
		

	





	

		

			

				
					
页面加载loading

				
			

			

				

					06-01
				

			

		

		

			
				
实现页面加载loading可以使用CSS和JavaScript结合的方式来实现。

1. CSS实现方式

在HTML中添加一个遮罩层和一个loading动画，通过CSS设置遮罩层透明度为0，当页面加载时，通过JavaScript获取到遮罩层和loading动画的DOM元素，并将遮罩层的透明度设置为1，从而实现页面loading效果。

示例代码如下：

```html
<!-- HTML代码 -->
<div class="loading-mask">
  <div class="loading-animation"></div>
</div>
```

```css
/* CSS代码 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.5s ease-in-out;
}

.loading-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #000;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
```

2. JavaScript实现方式

在HTML中添加一个loading动画，通过JavaScript监听页面的加载事件，当页面加载完成后，将loading动画的DOM元素从页面中移除，从而实现页面loading效果。

示例代码如下：

```html
<!-- HTML代码 -->
<div class="loading-animation"></div>
```

```css
/* CSS代码 */
.loading-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #000;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
```

```javascript
// JavaScript代码
window.addEventListener("load", function() {
  var loadingAnimation = document.querySelector(".loading-animation");
  loadingAnimation.parentNode.removeChild(loadingAnimation);
});
```

以上两种方式都可以实现页面加载loading效果，根据具体需要选择合适的方式。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值