Я использую библиотеку 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({
smoothScrolling: true,
smoothScrollingDuration: 200,
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 = 'https://someurl/';
// let base = 'test/'
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) {
//console.log(Images)
let i = 0;