web加载动画遮罩实现,附简易使用代码

Hi,I'm Shendi

目录

效果图

实现思路

使用方法

代码如下

使用到了 jquery

不使用 jQuery

---

效果图

Web加载动画效果

---

实现思路

比较简单,一个div,绝对布局,百分百的宽高,里面一个图片居中.

加载的动画图片需要自己设置

使用方法

代码在下方

先在当前页面引入js文件,然后直接使用 loading.show() 来显示加载动画

使用 loading.hide() 来隐藏加载动画

代码如下

使用到了 jquery

var loading;
$(document).ready(function () {
	var loadingDiv = document.createElement("div");
	loadingDiv.style.position = "absolute";
	loadingDiv.style.top = 0;
	loadingDiv.style.width = "100%";
	loadingDiv.style.height = "100%";
	loadingDiv.style.background = "rgba(0,0,0,0.6)";
	loadingDiv.style.zIndex = 9999;
	
	var loadingImg = document.createElement("img");
	loadingImg.src = "动图路径";
	loadingImg.className = "loadingImg";
	loadingDiv.appendChild(loadingImg);
	
	var style = document.createElement("style");
	style.type = "text/css";
	style.innerHTML = ".loadingImg {position: absolute; top: 50%; left: 50%; width: 20%; transform: translate(-50%, -50%);}" +
			"@media screen and (max-width: 720px) { .loadingImg {width : 50%;}}";
	document.head.appendChild(style);
	
	loading = {
		show : function () {
			document.body.appendChild(loadingDiv);			
		},
		hide : function () {
			document.body.removeChild(loadingDiv);
		}
	}
});

不使用 jQuery

var loading;
var loadingDiv = document.createElement("div");
loadingDiv.style.position = "absolute";
loadingDiv.style.top = 0;
loadingDiv.style.width = "100%";
loadingDiv.style.height = "100%";
loadingDiv.style.background = "rgba(0,0,0,0.6)";
loadingDiv.style.zIndex = 9999;

var loadingImg = document.createElement("img");
loadingImg.src = "图片路径";
loadingImg.className = "loadingImg";
loadingDiv.appendChild(loadingImg);

var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = ".loadingImg {position: absolute; top: 50%; left: 50%; width: 20%; transform: translate(-50%, -50%);}" +
		"@media screen and (max-width: 720px) { .loadingImg {width : 50%;}}";
document.head.appendChild(style);

loading = {
	show : function () {
		document.body.appendChild(loadingDiv);			
	},
	hide : function () {
		document.body.removeChild(loadingDiv);
	}
}

---

Github上完善了的代码(原生js)

我已将写好的代码优化上传至github

新增了一个显示并设置图片的方法用于更改加载图

https://github.com/1711680493/Application/tree/master/Loading