Question

我有一个移动网站，为此我想在用户点击链接时添加加载图标。我找到了一个不错的教程 - Check it here

我用过这个，但我遇到了问题。它将显示加载图标，直到页面完全加载。但对于较慢的连接，可能需要很长时间。我需要做的是，当页面加载它的第一个内容时，它会停止显示加载图标，或者至少显示一些内容，这样用户就不需要等待很长时间，并且可以在部分加载页面时开始检查页面。我不知道我该怎么做。任何帮助，将不胜感激。这是我正在使用的代码 -

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

Answer 1

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

使用DOMContentLoaded而不是onload ...

显示加载图标，直到页面加载其第一个元素

1 个答案: