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

r囧r小猫 2022-11-30 01:20 141阅读 0赞

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][https_github.com_1711680493_Application_tree_master_Loading]

[https_github.com_1711680493_Application_tree_master_Loading]: https://github.com/1711680493/Application/tree/master/Loading