Skrollr изображение мерцает и некоторые изображения не загружаются в Chrome - PullRequest
Новая
       15

Skrollr изображение мерцает и некоторые изображения не загружаются в Chrome

0 голосов
/ 27 августа 2018

Я использую библиотеку Skrollr.В начале все работает нормально, но при прокрутке вниз я наблюдаю мерцание, и изображения не загружаются.Содержание моего сайта просто изображения.Прекрасно работает на Firefox, но не на Chrome.Не могли бы вы мне помочь.Я использую около 190 изображений.Это проблема?

Я использую асинхронные вызовы для извлечения данных, и каждое изображение загружается до рендеринга skrollr.

Вот мой рабочий пример: https://jsfiddle.net/if_true/v1mLhutc/7/

html 

<body>
   <div id="fakeloader"></div>
   <div style="transform: translate3d(0,0,0);"></div>
   <div class="DESKScreen">
       <div id="info" hidden="hidden">0</div>
       <section id="slide">
          <div class="bcg"></div>
       </section>
   </div>
</body>

CSS

    *,:before,:after {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-backface-visibility:hidden;
    backface-visibility: hidden;
    }

#info{
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 20px;
    z-index: 9999;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
html{
    width: 100%;
    height: 100%;
}

section {
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
}



#slide .bcg {
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-position: center top;
    background-attachment: fixed;
    position: absolute;
    transform:translateZ(0)
}


.img{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: table;
    margin: auto;
    max-height: 100vh !important;
    height: 100% !important;
}

.item {
    width: 100%;
    position: absolute;
    opacity: 1;
}

  `Js`
    $(document).ready(function() {
  DivImage("sup");
  var s = skrollr.init({
    render: function(data) {
      console.log(data.curTop);
    }
  });

  //Check the screen size.
  (function() {
    if (screen.width < 768) {
      $("#fullpage").fullpage({
        //scrollingSpeed: 0,
      });

      $(".DESKScreen").css("display", "none");
    } else if (screen.width > 768) {
      $(".MObileScreen").css("display", "none");
    }
  })();

  //Fakeloader for the loadtime
  function loader() {
    $("#fakeloader").fakeLoader({
      timeToHide: 4000,
      bgColor: "#e74c3c",
      spinner: "spinner2"
    });
  }

  loader();
});

function DivImage(name) {
  //console.log(name);
  //a counter to set for div id
  let counter = 0;
  //create the urls based on a nr
  var Images = makeUrls();

  //first create the div and pass the counter to it
  CreateDiv(Images);
}

function makeUrls() {

  let base = "images/";
  let rest = ".jpg";
  let result = [];

  for (let i = 0; i < 191; i++) {
    let baseNr = 1 + i;
    if (baseNr === 2000) {
      console.log("base");
    } else {
      result.push(base + baseNr + rest);
    }
  }
  return result;
}


function CreateDiv(images) {
  // debugger;
  var from = 0,
    to = 0;
  let result = [];
  for (let i of images) {
    var newDiv = $('<div class="img-div"></div>');
    newDiv.css({
      backgroundImage: `url(${i})`
    });
    newDiv.attr("data--" + from + "-top", "opacity: 0;");
    from += 125;
    newDiv.attr("data--" + from + "-top", "opacity: 0;");
    from += 125;
    newDiv.attr("data--" + from + "-top", "opacity: 1;");
    newDiv.attr("data-anchor-target", "#slide");
    newDiv.attr("data-skrollr-decks-speed", "300");
    $("#slide").append($(newDiv));
  }
}
...