页面完全加载后会加载一些图像

问题描述 投票:0回答:1

我有这个问题,当我向下滚动我的网站上的其他图像时,它们是白色的,但是图像显示在瞬间。

我一直在寻找能找到解决办法的东西,但没有运气。

我的网站是: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&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 Stauersb&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 Stauersb&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 ([email protected])" 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">
          &copy; <?php
          $fromYear = 2019;
          $thisYear = (int)date('Y');
          echo $fromYear . (($fromYear != $thisYear) ? '-' . $thisYear : '');?> Lukas Stauersb&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>
html
1个回答
2
投票

您的视差镜像div具有css属性visibility: hidden,直到相关数据视差div出现在屏幕上的最后一刻。然后它收到一个visibility: visible并解释闪烁。

它在图书馆示例网站上运行良好,因为它们的图像宽度为1400px,而您的图像宽度为4800px(取决于图像)。您应该考虑将图像尺寸调整为更合适的尺寸和重量。 IMO 1200px是任何视口和设备之间图像质量和加载速度之间的良好折衷。

© www.soinside.com 2019 - 2024. All rights reserved.