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

Question

我正在使用 Microsoft Web Developer 2010 Express 应用开发 aspx.net 网站。当我向下滚动页面时，我一直在尝试更改背景，当我 return 向上滚动时，它会 return 到上一张图片。

我写了一个 javascript 代码，它在滚动时被调用，并将 1 添加到一个全局变量，它决定哪个图像应该在背景上。该代码有效，但是当我第一次尝试滚动时页面加载时我遇到了问题照片没有出现，我的意思是它需要时间才能加载。我的问题 - =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 即可实现此目标。将图像作为 background-images 添加到连续的 div，并在每个 div 上设置 background-attachment: fixed; 属性。这很简单，你只需要调整宽度和高度。

官方术语称为视差滚动，您可以通过谷歌搜索这个术语找到大量示例。

这是来自 W3School 的示例：Link

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

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

html

javascript

css

asp.net

background-image