页面初次渲染loading图
当第一次进入页面时,可能由于网速或其他原因请求接口需要等待很长时间,这是页面一片空白,很难看,切交互性也不好,这是,我们常常放上一个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图的更多相关文章
- vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义
最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...
- 当vue页面异步加载的数据想在页面上渲染怎么办
<template> <div class="test"> <div v-for="(item, index) in arr" : ...
- easyui $.parser.parse 页面重新渲染
一些dom元素是动态拼接上的easui的样式,由于页面已经渲染过了,所以需要手动执行渲染某个部件或者整个页面 $.parser.parse(); // parse all the page $.par ...
- 渲染voronoi图
渲染voronoi图要比计算voronoi图简单. 渲染voronoi图: 方法1: 在pixel shader里,对每一个像素,求哪个种子点到它的距离最近,将此种子点的颜色作为此像素颜色. 当种子点 ...
- Vue下路由History mode导致页面无法渲染的原因
用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...
- 简易仿ios菊花加载loading图
原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...
- SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染
在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...
- 利用box-shadow制作loading图
我们见过很多利用css3做的loading图,像下面这种应该是很常见的.通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签.但是这种做法很浪费资源.我们可以只用一个标签,然后利用 ...
- 使用HTML5制作loading图
昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...
随机推荐
- Python基础(九)--函数
函数的作用 减少重复代码 程序易于维护 程序易于扩展 函数的定义 >>> def calculate(x,y): #定义函数名为calculate,参数为x和y result = x ...
- 树莓派3b 串口乱码的一个解决思路
首先确认波特率设置正确,为115200 向microSD卡中烧录树莓派官方的镜像后,先不要急着把它插入树莓派中. 在电脑上打开microSD卡,按如下方式修改config.txt和cmdline.tx ...
- MySql 中锁的定义
行级锁,一般是指排它锁,即被锁定行不可进行修改,删除,只可以被其他会话select.行级锁之前需要先加表结构共享锁. 表级锁,一般是指表结构共享锁锁,是不可对该表执行DDL操作,但对DML操作都不限制 ...
- Docker入门(一):安装
一. 安装docker 1. 删除已安装的docker yum remove docker \ docker-client \ docker-client-latest \ docker-common ...
- 并不对劲的2-SAT
说明 板板题链接 这个人讲得很清楚 WAWAWAWA 建的边"不完整",比如当限制是"x为1时y一定为1"时,连x->y的边时,忘记连y'->x'的 ...
- java——包装类数据缓存 ==号详解
Java对部分经常使用的数据采用缓存技术,即第一次使用该数据则创建该数据对象并对其进行缓存, 当再次使用等值对象时直接从缓存中获取,从而提高了程序执行性能.(只对常用数据进行缓存) Java中只是对部 ...
- 连接云服务器中MySql数据库遇到的问题
使用的免费的云服务器,上面只能下载MySql数据库,不过当云数据库使用绰绰有余了,也就放一些测试数据而已 而且上面只可以部署php项目,.netcore项目部署实现比较麻烦 问题如下: 下载了navi ...
- 一行python能干什么?
我们都知道,python作为一个编程语言,它有一个最大的优势就是代码简短,那么一行python代码能实现哪些操作呢?一起来看看吧! 1.打印Hello World! 这是最基础的,相信不管学习哪一门语 ...
- 使用svn遇到的问题---(在编辑器没有配置svn的前提下)
日常写代码的过程中新增了文件,一般都是继续文件的书写,写完一部分后提交 新增文件后面经常忘记了add后commit 原来是可以在commit时勾选左下角的 [show unversioned file ...
- Entity Framework:三种开发模式实现数据访问
原文地址 http://blog.csdn.net/syaguang2006/article/details/19606715 前言 Entity Framework支持Database First. ...