Как предотвратить лаг фоновой загрузки на веб-сайте? - PullRequest
Новая
       23

Как предотвратить лаг фоновой загрузки на веб-сайте?

0 голосов
/ 17 мая 2019

Я работаю на сайте aspx.net с приложением Microsoft web developer 2010 express. И я пытался изменить фон, когда прокручиваю страницу вниз, и когда я вернусь, она вернется к предыдущему изображению.

Я написал код 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 загружались на страницу при загрузке страницы, а не только при прокрутке страницы. У кого-нибудь есть решение?

Ответы [ 2 ]

0 голосов
/ 17 мая 2019

Вместо использования javascript, используйте только CSS для достижения этой цели. Добавьте изображения в качестве background-images в непрерывные div и установите свойство background-attachment: fixed; для каждого из них. Это довольно просто, вам просто нужно отрегулировать ширину и высоту.

Официальный термин называется Parallax Scrolling , и вы можете найти множество примеров, гуглящих этот термин.

Вот пример из W3Schools: Ссылка

0 голосов
/ 17 мая 2019

Вместо того, чтобы использовать стиль url(<address>) для изображений, вы можете вместо этого использовать кодировку base64 для отправки данных изображения вместе с вашим CSS.Это увеличит время загрузки страницы, но все изображения будут немедленно доступны на клиенте.

Пример: document.body.style.backgroundImage = "url(data:image/png;base64,<imagedatahere>)";

Вы можете использовать эти статьи для справки:

...