Javascript加载掩码

JavaScript载入遮罩

要求：对JavaScript和HTML知识很少。 启用JavaScript的浏览器。 应用程序：对于所有加载缓慢且分段加载的页面很有用，因此无需查看各部分中的页面加载情况。

将其放在您的<head>中：

<script type="text/javascript">
function overlay() {elem = document.getElementById("overlay");elem.style.visibility="hidden";
elem = document.getElementById("bodydiv");elem.style.visibility="visible"; }
</script>

使您的<body>标签看起来像这样：

<body onLoad="overlay()">

在您的<body>内部，放在所有内容的顶部：

<div id="overlay" style="width:100%; height:100%; position: absolute; background-color:#000000;"><table><tr><td valign="center" height="100%" width="100%"><div align="center" style="border: 1px solid black; background-color:#ffffff; width:50%;"><h3>Loading... Please Wait.</h3></div></td></tr></table>
</div>
<div id="bodydiv" style="visibility:hidden;">... (your current page body) ...<br />... (Which should be long..) ...<br />... (because it has to load) ...<br />... (so yeah.. this is body) ...
</div>

因此，您将共同获得：

<html>
<head>
<title>Loading Screen</title>
<script type="text/javascript">
function overlay() {elem = document.getElementById("overlay");elem.style.visibility="hidden";
elem = document.getElementById("bodydiv");elem.style.visibility="visible"; }
</script>
</head>
<body onLoad="overlay()">
<div id="overlay" style="width:100%; height:100%; position: absolute; background-color:#000000;"><table><tr><td valign="center" height="100%" width="100%"><div align="center" style="border: 1px solid black; background-color:#ffffff; width:50%;"><h3>Loading... Please Wait.</h3></div></td></tr></table>
</div>
<div id="bodydiv" style="visibility:hidden;">... (your current page body) ...<br />... (Which should be long..) ...<br />... (because it has to load) ...<br />... (so yeah.. this is body) ...
</div>
</body>
</html>

并且您有一个愉快的加载消息。您可以编辑内容（div样式等），但是JavaScript必须保持原样，除非您知道自己在做什么。这确实是一个简单的脚本，但是适合那些想要的脚本。

真诚的

埃拉贡

From: https://bytes.com/topic/javascript/insights/743551-javascript-loading-mask

Javascript加载掩码相关推荐

基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
填坑 ---- arcgis api for javascript 加载天地图
写在前面首先要感谢 arcgis api for javascript 加载天地图这篇文章,帮助我完成了在网页中加载天地图. 在此就不再描述加载天地图的方法与过程,只记录我遇到的一个坑与填坑方法. ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
从易到难,写一个JavaScript加载器之一
先上代码: 1 (function(global) { 2 var createScript, insertScript, makeLoadQueue; 3 createScript = functi ...
网页javascript加载不出_写给初学者的JavaScript异步编程和背后思想
导读:对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了呢 ...
Javascript 加载详解
2019独角兽企业重金招聘Python工程师标准>>> 一.同步加载与异步加载的形式 1. 同步加载我们平时最常使用的就是这种同步加载形式: <script src=&quo ...
js 读取本地文件到服务器,在没有Web服务器的情况下使用Javascript加载本地文件...
我需要编写一个使用HTML5和canvas的软件. 整个软件应该能够在本地运行,而不需要服务器.所以我只能使用Javascript,不能使用php. 困难的部分:我必须动态获取操作期间所需的文本文件的 ...
js页面加载前执行_做一名合格的前端开发工程师：Javascript加载执行问题探索
做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一:原始情况首先大家看看如下的代码: 估计90%的程序员都会把js文件放在head中,但是大家有没有深究过 ...
javascript加载优化
1.将script放置在尽可能接近body标签底部的位置 2.减少script总数 3.defer 对应的script标签会被下载但不会被执行在onload句柄之前执行,但只兼容IE4+ ff3.5+ ...

Javascript加载掩码

Javascript加载掩码相关推荐

最新文章

热门文章