在网页中加入“加载中提示”的方法

title: 在网页中加入“加载中提示”的方法
date: 2019-09-15

原本在个人博客上写了一些博文，现转移到CSDN上

在网页中加入“加载中提示”的方法

在一些我们做的网页中，有时候需要加载一些东西，如果加载的东西数据量比较大，比较费时，例如加载一个大的图片或者我下面写的例子中需要从数据库中读取很多的数据绘制图形，这时候加载图形就会比较慢。那么，为了避免用户在使用我们网页时因加载过慢而急躁，甚至以为网页崩溃，所以在一些加载过慢的网页上加上一层“加载中”则是很有必要的。

确定需要加“加载中”的时机

通过网页执行流程，找到加载慢的点

本例中，需要将从数据库中获取数据的时间以加载中显示，所以首先需要确定获取数据的流程，在获取数据之后，将加载中的div抹去，显示由数据绘制的图形，即可成功。

 $.ajax({url:"***",type: "get",data: { type: "model", text: "swat", sTime: year, eTime: year },success: function(graph) {//载入页面时才执行等待中，其他不执行let loadingMask = document.getElementById('loadingDiv');loadingMask.parentNode.removeChild(loadingMask);//当数据获取之后，清除掉数据加载divthat.createGraph(graph);}});

获取数据成功后，将嵌入到网页的加载中div抹去，那么，如何将我们需要的加载中div嵌入到网页中呢？下面来介绍。

以在网页中嵌入div的形式加“加载中”在网页上

网页中嵌入加载中div

有两种方式嵌入到网页中实现加载中这一功能。

方式一：利用document.write（）来实现
首先定义一个变量var _loadinghtml，然后利用document.write(_LoadingHtml);将_loadinghtml这个div格式的变量值嵌入到网页中。但是该方法不能够很好的实现再次读取数据获取加载中这个div，因为document.write（）方法在二次加载，即网页已经完全加载完成后再获取数据加载时，嵌入网页的div会将所有网页元素清空，只剩下嵌入的加载中这一个div，所以不适用于多次获取数据的情况。
方式二：利用innerHTML来实现往网页中嵌入加载中div
- 在js中使用网页拼接，拼接出一个加载中div
  拼接出一个可以嵌入网页的div

            let html='';html+='<div id="loadingDiv" style="position: absolute; z-index:1; cursor1: wait; left: ';html+=_LoadingLeft;html+='px; top:' ;html+=_LoadingTop;html+='px; width: auto; height: 57px; line-height: 57px; ';html+='padding-left: 50px; padding-right: 5px; background: no-repeat scroll 5px 10px;color: #696969; ';html+= 'font-family:\'Microsoft YaHei\';">Loading......</div>';

将拼接的div嵌入到网页中

document.getElementById('loading').innerHTML =html ;

将这两部分封进一个加载函数中,在必要的地方直接调用函数

baseloading(){//获取浏览器页面可见高度和宽度let _PageHeight = document.documentElement.clientHeight,_PageWidth = document.documentElement.clientWidth;//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）let _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;//利用innerhtml把拼接的加载div放到网页中let html='';html+='<div id="loadingDiv" style="position: absolute; z-index:1; cursor1: wait; left: ';html+=_LoadingLeft;html+='px; top:' ;html+=_LoadingTop;html+='px; width: auto; height: 57px; line-height: 57px; ';html+='padding-left: 50px; padding-right: 5px; background: no-repeat scroll 5px 10px;color: #696969; ';html+= 'font-family:\'Microsoft YaHei\';">Loading......</div>';console.log(html);document.getElementById('loading').innerHTML =html ;},

通过这几个方式，即可完美解决在网页中添加加载中div

在网页中加入“加载中提示”的方法相关推荐

AutoCAD中程序化加载.NET程序集的方法
在AutoCAD中程序化加载.NET程序集的方法(2) 除了上一篇中提到的用.NET程序实现的方法外,另一种用LISP加载.NET的程序集的方法由来已久.思路是用lisp语言程序化调用"Ne ...
idea中重新加载新的依赖方法
idea中重新加载新的依赖方法点击右侧maven选项,在弹窗中点击这个按钮 2.然后再弹窗中输入mvn -U idea:idea 等待执行就可以了
Java中动态加载字节码的方法 (持续补充)
文章目录 Java中动态加载字节码的方法 1.利用 URLClassLoader 加载远程class文件 2.利用 ClassLoader#defineClass 直接加载字节码 2.1 类加载 - ...
web高德地图怎么加载离线地图_基于 QGIS 在内网中离线加载卫星地图的方法
1. 概述我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线影像加载. 另外,也 ...
基于 QGIS 在内网中离线加载卫星地图的方法
1. 概述我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线影像加载. 另外,也 ...
PHP自动加载类和方法,在PHP中自动加载类的最佳方法
请,如果您需要自动加载类 – 使用命名空间和类名称约定与SPL自动加载,它将节省您的重构时间. 当然,您将需要将每个类作为对象进行实例化. 谢谢. 或者像这样(我在我的一个项目中): spl_auto ...
linux中动态加载动态库的方法
功能:打开一个动态链接库包含头文件: #include <dlfcn.h> 函数定义 : void * dlopen( const char * pathname , int mod ...
html 图片显示一块一块加载失败,页面中图片加载失败的优化方法
网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的.情况如下: 不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大 ...
解决JQuery.Treeview在CI中无法加载查询函数的方法
项目结构如下: UAS为IOIS项目下的一个子项目,由于CI对文件的访问都是相对于项目中的index.php的,所以URL的访问方式有两种: 1.直接使用CI的默认访问方式:url:"htt ...
layui 加载中_宝骏360促销中，最高直降0.91万，新车全国4.77万起！
说到买车,大家都会有各种纠结.汽车作为日常生活的一种高消品,品牌配置差点的少则几万,中等好点的十几二十几万,高档高配置的几十上百甚至上千万,由于经济能力的不同,大家的选择也不尽相同,那么买车时,该如何 ...

在网页中加入“加载中提示”的方法

title: 在网页中加入“加载中提示”的方法
date: 2019-09-15

在网页中加入“加载中提示”的方法

确定需要加“加载中”的时机

通过网页执行流程，找到加载慢的点

以在网页中嵌入div的形式加“加载中”在网页上

网页中嵌入加载中div

在网页中加入“加载中提示”的方法相关推荐

最新文章

热门文章

在网页中加入“加载中提示”的方法

title: 在网页中加入“加载中提示”的方法 date: 2019-09-15

在网页中加入“加载中提示”的方法

确定需要加“加载中”的时机

通过网页执行流程，找到加载慢的点

以在网页中嵌入div的形式加“加载中”在网页上

网页中嵌入加载中div

在网页中加入“加载中提示”的方法相关推荐

最新文章

热门文章

title: 在网页中加入“加载中提示”的方法
date: 2019-09-15