Question

我正在使用Skrollr librabry。一开始它工作正常，但是当我向下滚动时，我遇到了闪烁，图像无法加载。我网站的内容只是图像。在Firefox上工作正常，但在Chrome上无法正常工作。请你帮助我好吗。我正在使用大约190张图像。那是个问题吗？

我正在使用异步调用来获取数据，并且在渲染skrollr之前已加载每个图像。

这是我的工作示例：https://jsfiddle.net/if_true/v1mLhutc/7/

html

If Not (Range("O" & i)) = vbNullString Then
    If Not IsEmpty(Range("O" & i)) Then
        Range("AC" & i).NumberFormat = 
        Application.WorksheetFunction.VLookup(Range("O" & i), currencies, 2, False)
    End If
End If

<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;
}

Skrollr图像闪烁，某些图像未在Chrome中加载

0 个答案: