加载缓冲效果实现js

最新推荐文章于 2022-09-18 16:59:02 发布

雕琢时光纸戆

最新推荐文章于 2022-09-18 16:59:02 发布

阅读量462

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/102765964

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

效果图

在获取数据前开始加载，填充到页面后让加载效果消失

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			html {
				height: 100%;
				width: 100%;
				
				
			}

			body {
				background-color: #eee;
				height: 100%;
				width: 100%;
			}

			.card {
				background-color: white;
				width: 200px;
				height: 100px;
				float: left;
				margin: 5px;

			}

			.card .name {
				padding: 20px 0px;
				text-align: center;
				/* font-size: 20px; */
			}

			.card .age {
				text-align: center;
				padding: 3px 0px;
				font-size: 0.9em;
			}

			.cover {
				width: 100%;
				height: 100%;
				display: flex;
				position: fixed;
				justify-content: center;
				align-items: center;


			}

			.cover.hidden {
				display: none;
			}
			#button{
				width: 100%;
				height: 100px;
				box-shadow: 0px 2px 10px #000000;
				background-color: rgba(0,0,0,.2);
				color: #333;
				font-size: 20px;
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<button type="button" id="button">加载</button>
		<div class="cover hidden">
			<img src="../img/5-121204193R0-50.gif">
		</div>
		<div id="root">

		</div>
		<script type="text/javascript">
		     var button1 =document.getElementById('button') 
			var cover = document.getElementsByClassName('cover')[0]
			var getDate = function() {
				cover.className = 'cover';

				var xhr = new XMLHttpRequest()
				xhr.open('GET', 'http://127.0.0.1:1080/', true)
				xhr.send();


				var tpl = '<div class="card">' +
					'<div class="name">' +
					'袁志航' +
					'</div>' +
					'<div class="age">' +
					'21' +
					'</div>' +
					'</div>'

				var obj = "{name : 'Aac'}"
				// xhr.onreadystatechange = function() {
				// 	if (xhr.status == 200 && xhr.readyState == 4) {
				// 		var result = JSON.parse(xhr.response)
				// 		// console.log(result)

				// 		var str = ''
				// 		result.forEach(function(item, index) {
				// 			str += tpl.replace('袁志航', result[index].name)
				// 				.replace('21', result[index].age)
				// 		})

				// 		// console.log(str)
				// 		document.getElementById('root').innerHTML += str

				// 	}
				var success = function() {
					var result = JSON.parse(xhr.response)
					console.log(result)

					var str = ''
					result.forEach(function(item, index) {
						str += tpl.replace('袁志航', result[index].name)
							.replace('21', result[index].age)
					})

					console.log(str)
					document.getElementById('root').innerHTML += str
cover.className = 'cover hidden'
				}
				
				var error = function() {
					console.log('error')
				}
				xhr.onreadystatechange = function() {
					if (xhr.status == 200 && xhr.readyState == 4) {
						success()
					}
				}
				return 1;
			}
			button1.addEventListener('click',function(){
				getDate()
			})
		</script>
	</body>
</html>