在等待数据时触发JavaScript-loader

时间:2018-05-07 11:07:34

标签: javascript html css wordpress loading

我正在尝试将加载程序添加到我的网站,该页面处于“加载”状态时应该可见。

EG。加载时间是大约6,8秒(等待6.3秒,下载0.4秒)。我希望我的装载机在整个6,8秒内可见,但就像现在一样,它只是在最后几秒显示。

继承我的代码: HTML:

<ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#3d455b"
        android:layout_alignParentLeft="true" >

        <HorizontalScrollView
            android:id="@+id/hscrll1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <RelativeLayout
                android:id="@+id/RelativeLayout1"
                android:layout_width="fill_parent"
                android:layout_gravity="center"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TableLayout
                    android:id="@+id/table_main"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true" >
                </TableLayout>
            </RelativeLayout>
        </HorizontalScrollView>
    </ScrollView>

CSS:

<div id="tpa-preloader"></div>

JavaScript的:

#mk-boxed-layout{ display: none; }

#tpa-preloader{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:url(/preloader.gif) no-repeat #FFFFFF 50%;
    -moz-background-size:148px 128px;
    -o-background-size:148px 128px;
    -webkit-background-size:148px 128px;
    background-size:148px 128px;
    z-index: 99998;
    width:100%;
    height:100%;
}

以下是我网站的链接:http://nettbutikk-sandbox.ellco.me/produkt/o35/

如何让function onReady(callback) { var intervalID = window.setInterval(checkReady, 1000); function checkReady() { if (document.getElementsByTagName('body')[0] !== undefined) { window.clearInterval(intervalID); callback.call(this); } } } function show(id, value) { document.getElementById(id).style.display = value ? 'block' : 'none'; } onReady(function () { show('mk-boxed-layout', true); show('tpa-preloader', false); }); 在整个6,8秒内可见,这意味着从加载过程的一开始?

提前致谢!

1 个答案:

答案 0 :(得分:0)

与大多数语言一样,JS也使用序列访问。我想说:

  1. 将您的加载程序代码放在顶部的html页面上。 加载库。然后:

    &LT;身体&gt;      

     <script>
    
      // Init you preloader
    
      // After this script put all other.... 
    
      // then use window.onload and put on bottom some 
      // setTimeout ( 4-6 sec ) then timer will trigger func hide preloader...
    </script>