Question

我正在使用Microsoft Web Developer 2010 Express应用程序在aspx.net网站上工作。当我向下滚动页面时，我一直在尝试更改背景，当我向上滚动时，它将返回上一张图像。

我编写了一个JavaScript代码，该代码从滚动时调用，并将1添加到全局var中，该var确定背景上应显示哪个图像。代码可以正常工作，但是在第一次尝试滚动照片时页面加载不出现时出现问题，这意味着它需要一段时间才能加载。我的问题-= {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;

            }
        }

结果就是我所说的。仅当客户端尝试滚动页面时，图像才会尝试加载。这会导致背面略微出现白色背景，直到图像完全加载为止。我希望我的javascript中的所有图像都在页面加载时加载到页面上，而不仅仅是在页面滚动时加载到页面上。有人有解决方案吗？

Answer 1

您可以使用base64编码将图像数据与CSS一起向下发送，而不是对图像使用url(<address>)样式。这样会增加页面加载时间，但是所有图像将立即在客户端上可用。

例如： document.body.style.backgroundImage = "url(data:image/png;base64,<imagedatahere>)";

您可以将这些文章用作参考：

Answer 2

不要使用javascript，而只需使用CSS即可达到此目标。将图像作为背景图像添加到连续的div中，并在每个图像上设置background-attachment: fixed;属性。这很简单，您只需要调整宽度和高度即可。

官方术语称为视差滚动，您可以找到大量使用此术语的示例。

以下是W3Schools的一个示例：Link

如何防止网站后台加载的滞后？

2 个答案: