解决js控制元素背景图片切换时的闪屏问题

最新推荐文章于 2024-07-09 15:47:50 发布

静尾

最新推荐文章于 2024-07-09 15:47:50 发布

阅读量3.1k

点赞数 1

分类专栏：无所不能的JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41176306/article/details/111869724

版权

无所不能的JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

解决js控制元素背景图片切换时的闪屏问题

看一个例子：

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.div1 {
				width: 100vw;
				height: 100vh;

				background-position: center;
				background-size: cover;
			}
			.bg1 {
				background-image: url('./img/bg1.png');
			}
			.bg2 {
				background-image: url('./img/bg2.png');
			}
		</style>
	</head>
	<body>
		<div class="div1 bg1"></div>

		<script>
			window.onload = () => {
				const div1 = document.querySelector('.div1');
				const timer = setInterval( () => {
					if(div1.classList.contains('bg1')) {
						div1.classList.replace('bg1', 'bg2');
					} else {
						div1.classList.replace('bg2', 'bg1');
					}
				}, 1000);
			}
		</script>
	</body>
	</html>

我想实现的效果就是div1的背景图片来回切换，时间间隔为1s。

效果实现了，但第一次进入页面时会出现一下闪屏现象

原因为：我的bg2.png图片没有预加载，在js切换到它时它并没有加载完成，所以出现闪屏

解决办法：先预加载图片，再添加效果

代码如下：

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.div1 {
				width: 100vw;
				height: 100vh;

				background-position: center;
				background-size: cover;
			}
			.bg1 {
				background-image: url('./img/bg1.png');
			}
			.bg2 {
				background-image: url('./img/bg2.png');
			}
		</style>
	</head>
	<body>
		<div class="div1 bg1"></div>

		<script>
			window.onload = () => {
				const div1 = document.querySelector('.div1');
				const img1 = new Image();
				img1.src = './igm/bg2.png';
				img1.onload = function () {
					const timer = setInterval( () => {
					if(div1.classList.contains('bg1')) {
						div1.classList.replace('bg1', 'bg2');
					} else {
						div1.classList.replace('bg2', 'bg1');
					};
				}, 1000);
				};	
			};
		</script>
	</body>
	</html>