js实现页面加载完毕之前显示Loading效果

最新推荐文章于 2023-03-06 15:20:56 发布
原创 最新推荐文章于 2023-03-06 15:20:56 发布 · 854 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
前端

当前文章被收录于：

前端
103 篇文章 0 人学习
订阅专栏 查看详情
js

当前文章被收录于：

js
83 篇文章 0 人学习
订阅专栏 查看详情
JavaScript

当前文章被收录于：

JavaScript
52 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了一种在网页加载过程中展示Loading效果的方法。主要步骤包括：一、在页面body部分添加用于显示Loading动画的div；二、通过CSS设置该div的位置、背景等样式；三、当页面所有JS执行完毕后隐藏此Loading区域。

页面加载完毕之前显示Loading效果

 

 

一、首先在body的最前面加入显示的Loading div区域：

<div id="PageLoadingEffect"></div>

 

二、设置Loading div区域的样式：

#PageLoadingEffect{position:absolute; left:0px; top:0px; background:white url('../QB_Image/QB_COM/QB_loading.gif') no-repeat center; width:100%; height:100%;z-index:99999;}

 

三、在页面所有JS方法执行完毕后在执行以下代码：

    $("#PageLoadingEffect").hide();

标签
#加载
vit的cam和注意力图： VIT模型的可解释性
YI_SHU_JIA的博客
10-09 1万+
VIT的热力图怎么画
推荐系统[六]：混排算法简介、研究现状混排技术以及MDP-DOTA信息流第三代混排调控框架，高质量项目实战。
丨汀、的博客
03-06 1883
混排是指将多个不同的推荐结果混合在一起，以提供更多样化的选择和更全面的覆盖。混排的目的是为了避免推荐系统出现过度偏向某些内容或类型的情况，从而提高推荐的多样性和准确性。混排的实现方式通常是基于多种推荐算法和数据源，通过加权和组合的方式来生成最终的推荐结果。信息流推荐算法的核心是理解用户兴趣，捕捉用户逛买意图，并据此做到高效的人货匹配。
javascript实现一个网页加载进度loading
11-26
loading随处可见，比如一个app经常会有下拉刷新，上拉加载的功能，在刷新和加载的过程中为了让用户感知到 load 的过程，我们会使用一些过渡动画来表达。最常见的比如“转圈圈”，“省略号”等等。 网页loading有很多用处，比如页面的加载进度，数据的加载过程等等，数据的加载loading很好做，只需要在加载数据之前（before ajax）显示loading效果，在数据返回之后（ajax completed）结束loading效果，就可以了。 但是页面的加载进度，需要一点技巧。 页面加载进度一直以来都是一个常见而又晦涩的需求，常见是因为它在某些“重”网页（特别是网页游戏）的应用特别重要；
MHT算法的Matlab程序
MHT多假设跟踪算法的Matlab程序，希望对大家有用。
记页面加载之前的loading效果
znbb_的博客
07-02 1516
最近做H5页面，内嵌到安卓端的APP内，需求是要在页面所有数据请求完毕之前显示loading图标提示用户等待，因为在手机端的网速很大程度上是不确定的，loading等待在用户体验度上确实比较友好。 话不多说，结合代码直接看效果 1.HTML结构部分 <div class="mask" id="mask_id"> <div class="mask_loading"&g...
在页面加载前先出现加载loading，页面加载完成之后再显示页面
weixin_30399155的博客
03-15 1万+
在此加入一个关于页面加载成功之前先展现一个loading的案例： 如下代码写入js里放在html头部即可实现需求：添加的可以自己在css文件设置宽高，也可以放入一个background的gif的loading图片 //在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '页面加载中，请等待...'; //呈现loading效果 ...
页面加载完成前显示LOADING....
weixin_30236595的博客
08-04 1908
<html> <head> <title></title> <script type="text/javascript"> var url = 'http://www.163.com'; //the Next page you want to disp...
js在html之前加载,js加载前显示loading（页面加载前）
weixin_42520573的博客
06-08 3200
工作中遇到，需要加loading。1、用jquery的load方法读取页面，页面读取完成前显示loading。2、首页js等加载过慢，页面加载完成前显示loading。(1).jquery .load()方法，load完成前显示loading$("#menu1").click(function(){$('#main_loading').show();$('#main-page').load('pa...
页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.
weixin_34192816的博客
12-05 1662
一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui.min.js 放有loading.gif图片及样式 <script type="text/javascript" src="js/jquery.js"></scri...
JS实现页面加载完毕之前loading提示效果
u012028371的博客
02-16 8213
做成js调用： base-loading.js代码 [html] view plain copy   /*******************************************    *     * 创建人：Quber（qubernet@163.com）    * 创建时间：2014
js：说说页面加载完之前那些事（loading、多函数加载、mounted）
flying meng的菜鸟居
01-26 2746
页面加载完全之前这段时间，还真的挺重要...有比如loading效果可以“稳住”用户，适当的动画也可以让用户“眼前一亮”。这里笔者分享一下原生&vue中页面加载完全之前那点事，咱也来唠唠...
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
ASP.NET
07-22 2264
这篇文章主要介绍了js实现的页面加载完毕之前loading提示效果,结合完整实例形式分析了js页面加载时显示loading效果的实现技巧,需要的朋友可以参考下 本文实例讲述了js实现的页面加载完毕之前loading提示效果。分享给大家供大家参考，具体如下： 一、JS代码： //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement...
js页面加载实现loading提示效果
蓝关故人
08-16 7156
由于页面在加载过程中请求了很多资源，导致打开过慢，且页面无提示，对用户不友好，测试人员希望增加loading效果。 参考如下步骤可行。 实际项目展示动态loading图有自有的方法，不便贴代码，以下用展示简单语句进行示例： //在页面未加载完毕之前显示的loading效果 var _LoadingHtml = '正在加载中，请稍后。。。'; //呈现loading效果 docu...
html加载中效果,JS实现页面加载完毕之前loading提示效果
weixin_32176627的博客
06-03 1173
一、JS代码：//获取浏览器页面可见高度和宽度var_PageHeight=document.documentElement.clientHeight,_PageWidth=document.documentElement.clientWidth;//计算loading框距离顶部和左部的距离(loading框的宽度为215px，高度为61px)var_LoadingTop=_Pag...
js实现的页面加载完毕之前loading提示效果
weixin_30563917的博客
07-15 456
页面加载readyState的五种状态原文如下:0: (Uninitialized) the send( ) method has not yet been invoked.1: (Loading) the send( ) method has been invoked, request in progress.2: (Loaded) the send( ) method has c...
JS实现，页面显示数据加载,显示加载效果，加载完成显示数据
weixin_44019016的博客
05-13 5935
这两天，公众号上的商城，总出现多次访问后台数据库。 所以今天加上了一个功能： 当用户进入商城时，显示一个JS加载的动效，加载完毕，显示内容。 具体实现如下 ： var load = new Loading(); var timer = setInterval(function(event) { lo...
js实现的页面加载完毕之前loading提示效果完整示例
09-29 317
//获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var _LoadingTo...
s实现页面加载完毕之前loading提示效果
ASP.NET
07-22 666
最近做项目遇见一个问题就是大的页面打开很慢，页面空白处太多，很影响客户体验，于是想着在页面加载的时候页面不要显示空白 于是用js实现了以下的内容 loading效果 //在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '页面加载中，请等待...'; //var _LoadingHtml = '<img src="loading.gi...
js实现页面加载完毕之前loading提示效果
热门推荐
NRGAGA的专栏
05-17 1万+
https://www.cnblogs.com/blueVirus/p/5583882.html最近做项目遇见一个问题就是大的页面打开很慢，页面空白处太多，很影响客户体验，于是想着在页面加载的时候页面不要显示空白于是用js实现了以下的内容 loading效果//在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '页面加载中，请等待...'; /...
Loading效果实现：加载新页面前的等待过渡画面
qq576777915的博客
12-02 1万+
2017年11月25日 由于最近在写一个web项目，由于前端框架开发，和后台查数据的语法不成熟导致页面加载速度过慢，遂想到用loading效果来过渡: 粗略的查阅了下网上的实现方法，在此总结下方法实现 先上效果图： 代码： 上面两段代码放在中间即可 思路详解： JS部分：在页面加载前就先加载一个div罩，等待页面全部加载完成
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值