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

时间:2018-08-27 08:59:18

标签: google-chrome javascript css html5

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

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

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

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
android:animateLayoutChanges="true"

    android:focusableInTouchMode="true"
    android:background="@color/app_background_color"
    android:fitsSystemWindows="true">

    <RelativeLayout
        android:id="@+id/ll_toolbar"
android:clipChildren="true"
        android:clipToPadding="true"
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_height"
        android:layout_alignParentTop="true"
        android:background="@color/toolbar_color">

        <ImageView
            android:id="@+id/iv_logo"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_centerInParent="true"
            android:layout_gravity="center_horizontal"
            android:contentDescription="@string/app_name"
            app:srcCompat="@drawable/my_l" />

        <LinearLayout
            android:layout_width="@dimen/date_time_view_width"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:background="@color/toolbar_color"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/white_color"
                android:textSize="@dimen/date_text_size" />

            <TextView
                android:id="@+id/tv_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/white_color"
                android:textSize="@dimen/time_text_size" />
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll_search_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_height"
        android:layout_below="@id/ll_toolbar"
        android:layout_gravity="center"
        android:background="@color/toolbar_color"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="gone">

        <EditText
            android:id="@+id/"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/drawable_text_padding"
            android:background="@drawable/search_bar_background"
            android:drawablePadding="@dimen/drawable_text_padding"
            android:drawableStart="@drawable/search"
            android:ellipsize="end"
            android:gravity="start|center"
            android:hint="@string/search_hint"
            android:imeOptions="actionDone"
            android:inputType="text"
            android:lines="1"
            android:padding="@dimen/drawable_text_padding"
            android:textColor="@color/white_color"
            android:textColorHint="@color/search_text_color"
            android:textSize="@dimen/toolbar_text_size" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_header"
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_height"
        android:layout_below="@id/ll_search_bar"
        android:background="@color/header_background_color"
        android:gravity="center"
        android:textColor="@color/white_color"
        android:textSize="@dimen/toolbar_text_size"
        android:textStyle="bold" />

    <!-- As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions. -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"

        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:layout_below="@id/tv_header" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/secondary_color"
        app:itemIconTint="@drawable/bottom_bar_color_selector"
        app:itemTextColor="@drawable/bottom_bar_color_selector"
        app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

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

0 个答案:

没有答案