Я пытаюсь сделать красивую шапку параллакса из 6 изображений PNG. Но страница ужасно зависает на 10 секунд и только потом начинает нормально работать. Если вы go перейдете на другую вкладку и go вернетесь, то вся вкладка снова замерзнет на 5 секунд. Почему это может произойти?
Фризы наблюдаются на двух разных компьютерах с хорошей мощностью. Даже если musi c из браузера работает и открывает вклад с этим параллаксом, musi c замедляется в 2 раза и начинает лагать: D
body {
background-color: #271c33;
}
.art-block {
position: relative;
z-index: 10;
display: block;
}
.art-block, .art_layer {
height: 1000px;
}
.art_layer {
background-position: bottom center;
background-size: auto 1038px;
background-repeat: repeat-x;
width: 100%;
position: absolute;
}
.art_layer.parallax {
position: fixed;
}
#art-back {
background-image: url(../img/background-min.jpg);
}
#art-1 {
background-image: url(../img/1-min.png);
}
#art-2 {
background-image: url(../img/2-min.png);
}
#art-3 {
background-image: url(../img/3-min.png);
}
#art-4 {
background-image: url(../img/4-min.png);
}
#art-5 {
background-image: url(../img/5-min.png);
}
#art-6 {
background-image: url(../img/6-min.png);
}
.main {
background-color: #271c33;
position: relative;
z-index: 100;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/util.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css?1582535292">
</head>
<body>
<div class="art-block">
<div class="art_layer parallax" id="art-back" data-speed="2"></div>
<div class="art_layer parallax" id="art-6" data-speed="7"></div>
<div class="art_layer parallax" id="art-5" data-speed="22"></div>
<div class="art_layer parallax" id="art-4" data-speed="33"></div>
<div class="art_layer parallax" id="art-3" data-speed="46"></div>
<div class="art_layer parallax" id="art-2" data-speed="58"></div>
<div class="art_layer" id="art-1" data-speed="55"></div>
</div>
<div class="main" style="height: 2500px;">
ss
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).scroll(function(){
var windowScroll = $(window).scrollTop();
$('.art_layer.parallax').each(function(){
var $layer = $(this);
var yPos = -(windowScroll * $layer.data('speed') / 100);
$layer.css({
"transform" : "translate3d(0px, " + yPos + "px, 0px)"
});
});
});
</script>
</body>
</html>
Может быть размеры изображения? 7000x3500 пикселей