Q:

How prevent the lag of background loading in a web site?

I'm working on an aspx.net site with the Microsoft web developer 2010 express app. And I've been trying to make the background change as I scroll down the page and when I return up it will return to the previous image.
I wrote a javascript code that is called from the  on scrolling and adding 1 to a global var which decides which image should be on the background.
The code works but I have a problem when the page loads the first time I'm trying to scroll the photo does not appear, I mean it takes time until it loads.
my problem - =video link

<!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() {//fun of background changing 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 result is just what I've said. the image tries to load only when the client tries to scroll the page. that's cause a slight white background appears on the back until the image fully loads. I want all the images in my javascript load to the page when the page load and not only when the page is scrolled.
Does anyone have a solution?

A:

Instead of using javascript, use only css to achieve this goal. Add the images as background-images to continuous divs and set background-attachment: fixed; property on each one of them. It is fairly simple, you just need to adjust width and heights. 
The official term is called Parallax Scrolling and you can find tons of examples googling this term. 
Here is an example from W3Schools: Link

