jquery 我怎么能显示一个加载gif,直到一个完整的html页面已经加载

ulmd4ohb  于 11个月前  发布在  jQuery
关注(0)|答案(3)|浏览(106)

我有一个网页,这是相当密集的通过HTML和CSS,这导致一些元素加载速度比其他人当用户访问该页面。背景可能需要一段时间来加载,等等.它得到相当丑陋看到它所有的加载元素的元素.
所以我想知道我如何才能首先加载一个不同的页面(第1页,只有一个gif和最少的html),然后只有在客户端的浏览器获取了所有页面的html之后,第2页(具有密集html的页面)才会出现。
我相信这可以用jQuery来完成,我对jQuery几乎一无所知。
任何建议将不胜感激,谢谢,

nzrxty8p

nzrxty8p1#

使用以下HTML(最好在正文的顶部):

<div id="loading"></div>

字符串
这个CSS:

#loading {
    background: url('spinner.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
}


下面的JavaScript(使用jQuery):

function hideLoader() {
    $('#loading').hide();
}

$(window).ready(hideLoader);

// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);


你可以将样式内联到div上,而不是放在样式表中,以减少加载器之前出现内容的机会。此外,你可以使用https://www.askapache.com/online-tools/base64-image-converter/或类似的工具将GIF转换为base 64 URI,并使用它而不是spinner.gif

wz1wpwve

wz1wpwve2#

<div id="overlay"></div>
<style>
    #overlay {
        position: fixed;
        background: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .hide {
        display: none;
    }
</style>
<script>
    $(window).load(function() {
     $('#overlay').addClass('hide');
    });
</script>

字符串

wvmv3b1j

wvmv3b1j3#

我已经在Laravel中实现了,它像预期的那样工作,

<style>
.loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background-color: #ffffffcf;
        }
        .loader img{
            position: relative;
            left: 40%;
            top: 40%;
        }
</style>

<div class="loader" ><img src="{{asset('public/img/loader.gif')}}"></div>

<script>
    window.onload = function() 
    {
        //display loader on page load 
        $('.loader').fadeOut();
    }

</script>

字符串

相关问题