Question

https://myfirstparallax.netlify.com/

我一直在互联网上寻找解决滚动图像时遇到的延迟的解决方案，但似乎没有一个可以帮助解释为什么视差滚动会导致延迟。是因为图像尺寸太大吗？注意：我知道，我的网站值得一试，不要判断。

import produce from "immer";

const reducer = (state = initial_state, action) => {
  switch (action.type) {
    case "HANDLE_BODY_CHANGE_RESERVATION": {
      return produce(state, draft => {
        draft.MenuBoxes.box11 = '◄'
        draft.MenuBoxes.box12 = 'DELETE A \n RESERVATION'
        draft.MenuBoxes.box13 = ''
        draft.MenuBoxes.box21 = 'MAKE A \n RESERVATION'
        draft.MenuBoxes.box22 = 'REVIEW \n RESERVATIONS'
        draft.MenuBoxes.box23 = ''
        draft.MenuBoxes.box31 = 'UPDATE A \n RESERVATION'
        draft.MenuBoxes.box32 = ''
        draft.MenuBoxes.box33 = ''}
    });
};

body, html{
	height:100%;
	margin: 0;
	font-size: 16px;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	line-height:1.8em;
	color:#666;
}
/* ---------------------------------------------------------*/
p{
	font-sizes: 5em;
}

.name{
font-family: 'Montserrat', sans-serif;
font-size: 60px;

font-weight:normal;
margin-right: 135px;
margin-top: 14px;
padding-left: 20px;
color: white;

}



.main-nav{
  font-family: 'Roboto Condensed', sans-serif;
  font-size:23px;
  list-style-type: none;
  opacity: 0.9;
  margin: 0;
  padding: 0;
  padding-top:10px;
  overflow: hidden;
  background-color: #333;
  height: 64px;

  display:flex;
  flex-direction: row;
  

  border: 2px solid aqua
  background-image:url('../image/image1.jpg');
}

.main-nav:nth-child(4) {
	order: 1;
	float: right;
 }


li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  width:180px;
  
  transition-duration: 0.4s, 0.8s, 0.4s;
  transition-property: background, border-radius, color;
}

li a:hover {
  background-color: #111;
  border-radius: 5px;
  width:180px;

  overflow: hidden;
  color: #fff;
  background: #4a89ca;
  border-radius: 1em;
  
}




/* ---------------------------------------------------------*/



.pimg1,
.pimg2,
.pimg3,
.pimg4{
	position: relative;
	opacity: 0.70;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	
	/* Now is where the parallax Effect Begin */
}



.pimg1{
	background-image:url('../image/image1.jpg');
	min-height: 590px;
}

.pimg2{
	background-image:url('../image/image2.jpg');
	min-height: 600px;
}

.pimg3{
	background-image:url('../image/image3.jpg');
	min-height: 400px;
}

.pimg4{
	background-image:url('../image/image4.jpg');
	min-height: 600px;
}

.section{
	text-align: center;
	padding: 50px 80px;
}

.section-light {
	background-color: #f4f4f4;
	color: #666;
}

.section-dark {
	background-color: #282e34;
	color: #ddd;
}



.ptext{
	
	position:absolute;
	top:50%;
	width:100%;
	text-align:center;
	color:#000;
	font-size:27px;
	letter-spacing: 8px;
	text-transform: uppercase;
	justify-content: center;
	display: flex;
	align-items: center;
	line-height: 41px;
}

.ptext-2{

	position:absolute;
	top:50%;
	width:100%;
	text-align:center;
	color:#000;
	font-size:27px;
	letter-spacing: 8px;
	text-transform: uppercase;
	justify-content: center;
	display: flex;
	align-items: center;
	line-height: 41px;

}

.ptext-2 .border-2{
	background-color:#111;
	color: #fff;
	margin-top: -35px;
	padding: 20px;
	border-radius: 5px;
}


.ptext .border{
	background-color:#111;
	padding: 20px;
	border-radius: 5px;
}

.text-1{
		margin-top: -56px;
	
	}

.ptext .border.trans{
	background-color: transparent;
}

.grid-1{
	background-image:url('../image/grid1.jpg');
	height: 350px;
	width: 450px;
	background-position: center;
	background-size: cover;
	
}

.grid-2{
	background-image:url('../image/grid2.jpg');
	height: 350px;
	width: 450px;
	background-position: center;
	background-size: cover;
	
}
.grid-3{
	background-image:url('../image/grid3.jpg');
	height: 350px;
	width: 450px;
	background-position: center;
	background-size: cover;
	
}

.grid-4{
	background-image:url('../image/grid4.jpg');
	height: 350px;
	width: 450px;
	background-position: center;
	background-size: cover;
	
}

.grid-5{
	background-image:url('../image/grid5.jpg');
	height: 350px;
	width: 450px;
	background-position: center;
	background-size: cover;
	
}

.grid-6{
	background-image:url('../image/grid6.jpg');
	height: 350px;
	width: 450px;
	background-position: center;
	background-size: cover;
	
}




.cool-image{
	text-align: center;
	padding: 1px 20px;
}
.pict-1{
	margin-bottom: -8px;
	margin-top: 12px;
	}

.pict-2{
	text-align:center;
}	

.contacts{
	
	list-style-type:none;
	display: inline;
	

	float:right;
}	
	
.contacts-2{
	list-style-type:none;
	display: inline;
	float:left;
}		

.contacts-3{
	list-style-type:none;
	display: inline;
	text-align:center;
	margin-top:10px;
}		

.quick-fix{
	padding-bottom:60px;
}

.font-2{
	color: #fff;
}
	
.font-4{
font-family: 'Gloria Hallelujah', cursive;
color: black;
}	

.font-5{
	font-family: 'Montserrat', sans-serif;
}

@media(max-width:568px){
	.pimg1,
	.pimg2,
	.pimg3{
		background-attachment: scroll;	
		
	}
	
	.text-1{
		margin-top: -140px;
	}
	
	.grid-1{
		margin-left: -70px;
	}
}
}

Answer 1

您正在使用非常重的图形图像。此简单页面的权重为 44.1MB 。其中90％是您使用的9张图像。对于您的计算机来说，使用它要困难得多。（根据Microsoft HTML Help 1.4，FYI网站的平均重量约为2MB）

在this article之类的服务或任何其他服务上压缩图形。您还可以在Photoshop或任何现代图像编辑器中使用“保存为Web”。

我要说的是，此页面看起来重量减轻了5到10倍。视差肯定会更顺畅。这也会增加您的页面加载时间。

Answer 2

乍看之下，您正在加载太多内容。

太大了。

如果图像具有原始大小（例如4K），页面会冻结是一种自然的行为。

不是sé滚动，而是您的网络本身。

我将实现延迟加载（考虑使用像这样的库：http://jquery.eisbehr.de/lazy/）而且，当然可以使用较小的预览。

如果要加载原始尺寸的图像，请以模态方式进行。

为什么我的视差网站滚动时会显得如此迟钝？

2 个答案: