Skrollr image flickers and some images doesnt load in chrome

Question

I am using Skrollr librabry. In the start it works fine,but as I'm scrolling down,I am experiencing flickering and images do not load. The content of my website are just images. Works fine on firefox, but not on Chrome. Could you please help me. I am using approximately 190 images. Is that an issue?

I am using async calls to fetch the data,and every image is being loaded before the skrollr is rendered.

Here's my working example : 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));
  }
}

Skrollr image flickers and some images doesnt load in chrome

0 Answers0