时间戳

首页 > 解决方案 > 如何防止网站后台加载滞后？

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

问题描述

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

我编写了一个 javascript 代码，该代码从滚动调用并将 1 添加到一个全局变量，该变量决定哪个图像应该在背景上。该代码有效，但是当我第一次尝试滚动照片时页面加载时出现问题，我的意思是加载需要时间。我的问题 - =视频链接


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

标签： javascripthtmlcssasp.netbackground-image

解决方案

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

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

您可以参考这些文章：

推荐阅读