Currently, I am working on a website built in aspx.net using the Microsoft Web Developer 2010 Express application. My goal is to create a dynamic background that changes as users scroll down the page and reverts back to the previous image when scrolling up.
To achieve this, I have written a JavaScript code that increments a global variable upon scrolling, determining which image should be displayed as the background. While the code works, I am facing an issue where the initial loading of the page causes a delay in displaying the background image when scrolling for the first time.
This problem can be observed in this video demonstration.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="../css/css.css" rel="stylesheet" type="text/css" />
<script src="../JS/backgroundMovement.js" type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
#form1
height:10000px;
</style>
</head>
<body onscroll="myFunction()">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
var x = 1;
function myFunction() {
// Function for changing the background while scrolling
x += 1;
switch (x % 20) {
case 4:
document.body.style.backgroundImage =
"url('../pics/background1.png')";
Break;
case 8:
document.body.style.backgroundImage =
"url('../pics/background2.png')";
Break;
case 12:
document.body.style.backgroundImage =
"url('../pics/background3.png')";
Break;
case 16:
document.body.style.backgroundImage =
"url('../pics/background4.png')";
Break;
case 20:
document.body.style.backgroundImage =
"url('../pics/background4.png')";
Break;
}
}
The issue arises from images loading only when a user scrolls, causing a momentary white background before the image fully loads. To address this, I want all the images in my JavaScript code to load when the page initializes rather than wait until the page is scrolled. Is there a solution available for this?