#html
#HTML
Вопрос:
У меня такая проблема, когда при прокрутке вниз других изображений на моем веб-сайте они белые, но затем изображение отображается через долю секунды.
И я искал вокруг, чтобы найти что-нибудь, чтобы это исправить, но безуспешно.
Мой веб-сайт: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 Stauersbamp;oslashl</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 Stauersbamp;oslashl</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 Stauersbamp;oslashl.</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øl/" 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">
amp;copy; <?php
$fromYear = 2019;
$thisYear = (int)date('Y');
echo $fromYear . (($fromYear != $thisYear) ? '-' . $thisYear : '');?> Lukas Stauersbamp;oslashl.
</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>
Ответ №1:
Ваши параллакс-зеркальные div-файлы имеют атрибут css visibility: hidden до самого последнего момента, когда на экране появляется связанный с данными параллакс div. Затем он получает visibility: visible и это объясняет мерцание.
Это отлично работает на веб-сайте с примерами библиотек, потому что их изображения имеют ширину 1400 пикселей, а ваши — 4800 пикселей (в зависимости от изображения). Вам следует рассмотреть возможность изменения размера ваших изображений до более подходящих размеров и веса для Интернета. IMO 1200px — это хороший компромисс между качеством изображения и скоростью загрузки на любом экране просмотра и устройстве.
Комментарии:
1. Хорошо. Я тоже попробую посмотреть, будут ли какие-либо изменения. Я свяжусь с вами.
2. с изменением размера все прошло гладко. Спасибо за совет. Я буду использовать это.