我有一个问题，当我向下滚动网站上的其他图像时，它们是白色的，但是图像在一秒钟后显示。
我一直在四处寻找解决问题的方法，但是没有运气。
我的网站是：https://lukasstauersboel.dk/
由于我有预加载器，第一个图像加载正常，但其他图像却没有。
我拥有的代码：
<!DOCTYPE html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta class="foundation-mq">
<meta property="og:title" content="Lukas Stauersbøl"/>
<meta property="og:type" content="portfolio"/>
<meta property="og:url" content="http://lukasstauersboel.dk/"/>
<!-- Title w/icon -->
<title>Lukas Stauersbøl</title>
<!-- Links -->
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/LineIcons.min.css">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<!-- Scripts -->
<script src="js/nav.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" integrity="sha384-/Gm+ur33q/W+9ANGYwB2Q4V0ZWApToOzRuA8md/1p9xMMxpqnlguMvk8QuEFWA1B" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/scripts.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
<div id="preloader-wrap">
<div class="preload"></div>
</div>
<header>
<!-- Nav bar -->
<div id="navDiv">
<ul id="topNav" class="topNavMain">
<li class="topNavTrigger">
<a class="icon icon-menu"><span>Menu</span></a>
<nav class="topNavWrap">
<div class="topNavScroll">
<ul class="topNav">
<li>
<a class="icon lni-user" href="#aboutMe">About me</a>
</li>
<li>
<a class="icon lni-book" href="#myKnowledge">My knowlegde</a>
</li>
<li>
<a class="icon lni-envelope" href="#contactMe">Contact me</a>
</li>
</ul>
</div>
</nav>
</li>
<li><a href="#">Lukas Stauersbøl</a></li>
</ul>
</div>
<!-- Nav bar end -->
</header>
<main>
<div data-parallax="scroll" data-image-src="img/bg1.jpg" class="parallax">
<!-- Intro start -->
<section id="introMsg" class="sectionPadding">
<div class="grid-x">
<div class="cell">
<h1 class="welcomeMsg">Hello. <br> I'm Lukas Stauersbøl.</h1>
</div>
<div class="cell">
<p class="underWelcomeMsg">If you want to read more about me and what I can do, <br> then feel free to look around. </p>
</div>
</div>
</section>
</div>
<!-- Intro end -->
<!-- About me start -->
<section id="aboutMe" class="sectionBg">
<div class="grid-x">
<div class="cell small-12 medium-6 slideInLeft margin-fix">
<h2 class="sectionTitle">About me</h2>
<p class="sectionTxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce mollis pretium felis id ultricies. Sed libero risus, volutpat vel rhoncus et, auctor non ipsum. <br> Praesent sollicitudin nibh nisl, et sagittis nulla ornare at.</p>
</div>
<div class="cell small-12 medium-6 slideInRight">
<img src="img/portrait.jpg" alt="" data-parallax="scroll" data-image-src="img/portrait.jpg" class="imgPortrait"></img>
</div>
</div>
</section>
<!-- About me end -->
<!-- My work start -->
<section>
<div data-parallax="scroll" data-image-src="img/bg2.jpg" class="parallax2">
</section>
<section id="myWork" class="sectionBg">
<div class="grid-x">
<div class="cell small-12 medium-6 slideInLeft margin-fix">
<h2 class="sectionTitle">My work</h2>
<p class="sectionTxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce mollis pretium felis id ultricies. Sed libero risus, volutpat vel rhoncus et, auctor non ipsum. <br> Praesent sollicitudin nibh nisl, et sagittis nulla ornare at.</p>
</div>
<div class="cell small-12 medium-6 slideInRight margin-fix">
<h3 class="sectionTitle">Links</h3>
<p class="sectionTxt">FreeCodeCamp projects: <a href="https://codepen.io/collection/nZKkRj/" target="_blank" rel="noreferrer">Click here</a>.</p>
</div>
</div>
</section>
</div>
<!-- My work end -->
<!-- My knowlegde start -->
<section>
<div data-parallax="scroll" data-image-src="img/bg3.jpg" class="parallax2">
</section>
<section id="myKnowledge" class="sectionBg">
<div class="grid-x">
<div class="cell small-12 medium-6 margin-fix slideInLeft">
<h2 class="sectionTitle">My knowlegde</h2>
<p class="sectionTxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce mollis pretium felis id ultricies. Sed libero risus, volutpat vel rhoncus et, auctor non ipsum. <br> Praesent sollicitudin nibh nisl, et sagittis nulla ornare at.</p>
</div>
<div class="cell small-12 medium-6 margin-fix slideInBottom">
</div>
</div>
</section>
</div>
<!-- My knowlegde end -->
<!-- Contact me start -->
<section>
<div data-parallax="scroll" data-image-src="img/bg4.jpg" class="parallax3">
</section>
<section id="contactMe" class="sectionBg">
<div class="grid-x">
<div class="cell small-12 medium-6 margin-fix2 slideInLeft">
<form class="form-contact" method="POST">
<h2 class="sectionTitle">Contact Me</h2>
<label for="inputName" class="sr-only">Name:</label>
<input type="name" name="name" id="inputName" class="form-control" placeholder="Your Name" required>
<label for="inputEmail" class="sr-only">E-Mail:</label>
<input type="email" style="margin: 0 0 1rem;" name="email" id="inputEmail" class="form-control" placeholder="i.e (johndoe@gmail.com)" required>
<label for="inputSubject" class="sr-only">Subject:</label>
<input type="name" name="subject" id="inputSubject" class="form-control" placeholder="Subject..." required>
<label for="inputMsg" class="sr-only">Message:</label>
<textarea name="message" class="form-control box-size" id="inputMsg" rows="5" placeholder="Type you message..." required></textarea>
<button class="button secondary" type="submit">Send</button>
</form>
</div>
<div class="cell small-12 medium-6 slideInRight margin-fix3 center-fix">
<h3 class="sectionTitle padding-bottom">Social Media</h3>
<a href="https://www.facebook.com/lukasstauersboel" target="_blank" rel="noreferrer" class="button lni lni-facebook-original size-sm">Facebook</a>
<a href="https://www.linkedin.com/in/lukas-stauersb%C3%B8l/" target="_blank" rel="noreferrer" class="button lni lni-linkedin-original size-sm">LinkedIn</a>
<a href="https://www.instagram.com/lukas_stauersbol/" target="_blank" rel="noreferrer" class="button lni lni-instagram-original size-sm">Instagram</a>
</div>
</div>
</section>
</div>
</main>
<footer>
<section id="bottomPage" class="sectionBg4">
<div class="center-fix copyright">
© <?php
$fromYear = 2019;
$thisYear = (int)date('Y');
echo $fromYear . (($fromYear != $thisYear) ? '-' . $thisYear : '');?> Lukas Stauersbøl.
</div>
</section>
</footer>
<script>
new sMenu( document.getElementById( 'topNav' ) );
</script>
<script>
var slideInLeft = {
distance: '100%',
origin: 'left',
duration: 600,
opacity: null
};
var slideInRight = {
distance: '100%',
origin: 'right',
duration: 750,
opacity: null
};
var slideInTop = {
distance: '150%',
origin: 'top',
duration: 650,
opacity: null
};
var slideInBottom = {
distance: '100%',
origin: 'bottom',
duration: 690,
opacity: null
};
ScrollReveal().reveal('.slideInBotttom', slideInBottom);
ScrollReveal().reveal('.slideInTop', slideInTop);
ScrollReveal().reveal('.slideInLeft', slideInLeft);
ScrollReveal().reveal('.slideInRight', slideInRight);
</script>
<script type="text/javascript">
function parseJSAtOnload() {
var links = ["js/nav.js", "js/classie.js", "js/scripts.js", "js/parallax.js", "js/modernizr.custom.js", "js/parallax.min.js", "js/vendor/what-input.js", "js/vendor/foundation.js", "js/vendor/foundation.min.js"],
headElement = document.getElementsByTagName("head")[0],
linkElement, i;
for (i = 0; i < links.length; i++) {
linkElement = document.createElement("script");
linkElement.src = links[i];
headElement.appendChild(linkElement);
}
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>
</body>
答案 0 :(得分：2)
您的视差镜像div具有css属性visibility: hidden，直到最后一个相关数据视差div出现在屏幕上。然后它收到一个visibility: visible并解释了闪烁。
它在图书馆示例网站上效果很好，因为它们的图像宽1400像素，而您的图像宽4800像素（取决于图像）。您应该考虑将图像调整为适合网络的尺寸和权重。 IMO 1200px是在任何视口和设备上的图像质量和加载速度之间的良好折衷。