当第一次进入页面时,可能由于网速或其他原因请求接口需要等待很长时间,这是页面一片空白,很难看,切交互性也不好,这是,我们常常放上一个loading等待图给用户以反馈

// 页面尚未加载时的loading图
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
var _LoadingHtml = '<div id="loadingDiv" class="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#000;opacity:1;filter:alpha(opacity=80);z-index:10000;">'+
'<div style="position: absolute; cursor: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width:auto;padding:0 8px;background: #fff; font-size: 14px;" ><img style="width:50px;height:50px;display: inlin-block;" src="./style/img/load.gif"><span>页面加载中,请稍候...</span></div>'+
'</div>';
document.write(_LoadingHtml);
document.onreadystatechange = completeLoading;
function completeLoading() {
if (document.readyState == "complete") {
// debugger
var loadingMask = document.getElementById('loadingDiv');
loadingMask.parentNode.removeChild(loadingMask);
}
}

页面初次渲染loading图的更多相关文章

  1. vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义

    最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...

  2. 当vue页面异步加载的数据想在页面上渲染怎么办

    <template> <div class="test"> <div v-for="(item, index) in arr" : ...

  3. easyui $.parser.parse 页面重新渲染

    一些dom元素是动态拼接上的easui的样式,由于页面已经渲染过了,所以需要手动执行渲染某个部件或者整个页面 $.parser.parse(); // parse all the page $.par ...

  4. 渲染voronoi图

    渲染voronoi图要比计算voronoi图简单. 渲染voronoi图: 方法1: 在pixel shader里,对每一个像素,求哪个种子点到它的距离最近,将此种子点的颜色作为此像素颜色. 当种子点 ...

  5. Vue下路由History mode导致页面无法渲染的原因

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...

  6. 简易仿ios菊花加载loading图

    原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...

  7. SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染

    在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...

  8. 利用box-shadow制作loading图

    我们见过很多利用css3做的loading图,像下面这种应该是很常见的.通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签.但是这种做法很浪费资源.我们可以只用一个标签,然后利用 ...

  9. 使用HTML5制作loading图

    昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...

随机推荐

  1. POJ1041 John's trip 【字典序输出欧拉回路】

    题目链接:http://poj.org/problem?id=1041 题目大意:给出一个连通图,判断是否存在欧拉回路,若存在输出一条字典序最小的路径. 我的想法: 1.一开始我是用结构体记录边的起点 ...

  2. windows下,给golang编译的exe添加一个图标

    通过go build生成的exe文件,通常是一个默认的图标,发给别人的时候,总觉得像病毒,下面我们来给他加一个好看的图标,让他看起来正经一些. 1.找到一个喜欢的图片. 2.通过工具或是在线工具生成. ...

  3. windows环境jar包部署到linux服务器,一键操作(帮助说明)

    背景:在上次https://www.cnblogs.com/shexunyu/p/11165282.html发布了第一个版本后,后面增加了相关功能 需求:做下简单的说明文档 下载:https://fi ...

  4. 安装oracle数据库11g及问题解决

    安装步骤可借鉴https://www.cnblogs.com/qfb620/p/4577255.html 1.安装后发现用Navicat无法连接数据库显示报错ORA-28547:connection ...

  5. redis 慢查询、Pipeline

    1.慢查询 简介 慢查询顾名思义是将redis执行命令较慢的命令记录下来,redis处理慢查询时是将慢查询记录到慢查询队列中 慢查询配置 slowlog-max-len 慢查询队列长度(记录多少条慢查 ...

  6. 区间dp之 "石子合并"系列(未完结)

    A. 石子合并<1> 内存限制:128 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统评测 方式:文本比较   题目描述 有N堆石子排成一排(n<=100),现要将石 ...

  7. url编码问题小计

    昨天通过get访问服务器遇到了服务器获取不到参数的问题,最后排查下来是因为url编码的原因,之前使用的是字符串拼接,所以有一些特殊字符如‘%’没有正确的编码, 通过改成各个部分编码,正确获取到数据. ...

  8. 并不对劲的CF1237D&E:Balanced Playlist and Binary Search Trees

    CF1237D Balanced Playlist 题意 有一个长度为\(n\)(\(n\leq 10^5\))的循环播放歌单,每首歌有一个优秀值\(a_i\)(\(a_i\leq 10^9\)). ...

  9. charles 抓包 (一)

    在web.app开发中经常需要通过抓包来定位页面.接口返回数据的问题.在mac系统中,charles是一款功能丰富的抓包软件.可以实现app的数据抓包. 工具:charles 附送charles的破解 ...

  10. Cannot resolve the collation conflict between "SQL_Latin1_General_CP1_CI_AS" and "Chinese_PRC_CI_AI" in the equal to operation.

    Executed as user: NT AUTHORITY\SYSTEM. Cannot resolve the collation conflict between "Chinese_P ...