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

【问题标题】：How prevent the lag of background loading in a web site?如何防止网站后台加载滞后？
【发布时间】：2019-10-04 23:49:45
【问题描述】：

我正在使用 Microsoft web developer 2010 express 应用程序开发一个 aspx.net 网站。当我向下滚动页面时，我一直在尝试更改背景，当我返回时，它将返回到上一个图像。

我编写了一个 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 中的所有图像在页面加载时加载到页面，而不仅仅是在页面滚动时加载。有人有解决办法吗？

【问题讨论】：

预加载图像，自 90 年代以来有大量脚本用于预加载图像。
也许这个 javascript 插件会有所帮助：imagesLoaded
有多种视差插件可以提供帮助。根据您的用例，有些比其他更好。例如，如果您需要担心移动设备，那么在性能方面会稍微缩小选择范围。但是有很多选择。

标签： javascript html css asp.net background-image

【解决方案1】：

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

官方术语称为Parallax Scrolling，您可以在谷歌上找到大量使用此术语的示例。

这是来自 W3Schools 的示例：Link

【讨论】：

【解决方案2】：

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

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

您可以参考这些文章：

【讨论】：