解決js控制元素背景圖片切換時的閃屏問題

總柴↑發表於2020-12-28
JS

解決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>

定義一個Image物件，併為它設定src屬性，就相當於為瀏覽器快取了一張圖片。

vw，vh不懂的參考文章：通俗易懂——css長度單位：px、em、rem、vh、vw、in、…

相關文章