顯示加載圖標,直到頁面加載其第一個元素

[英]Show a loading icon until the page loads its first element


I have a mobile site and for it I was looking to add a loading icon when user clicks on a link. I found a decent tutorial on it - Check it here

我有一個移動網站,為此我想在用戶點擊鏈接時添加加載圖標。我發現了一個不錯的教程 - 在這里查看

I used this but I am having a problem. It will show loading icon until the page loads fully. But for slower connections it may be long time. What I need is to do that it stops showing loading icon when the page loads it's first content or at least something to show so that user does not need to wait for long time and he can start checking the page while it has been loaded partially. I have no idea how do I do that. Any help would be appreciated. This is the code I am using -

我用過這個,但我遇到了問題。它將顯示加載圖標,直到頁面完全加載。但對於較慢的連接,可能需要很長時間。我需要做的是,當頁面加載它的第一個內容時,它會停止顯示加載圖標,或者至少顯示一些東西,這樣用戶就不需要等待很長時間了,他可以在部分加載頁面時開始檢查頁面。我不知道我該怎么做。任何幫助,將不勝感激。這是我正在使用的代碼 -

       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $(".loader").fadeOut("slow");
    })
    </script>
<div class="loader"></div>

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

1 个解决方案

#1


0  

document.addEventListener( "DOMContentLoaded", ready, false );
function ready(){
alert("page initialised");
}

Use DOMContentLoaded instead of onload...

使用DOMContentLoaded而不是onload ...


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/09/17/72f42858904f6146ead918aac3734fdd.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com