带有来自 URL 的 gif 的 Html 预加载器

Question

我有这个预加载器代码:

<div class="loading">
   <img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif">
</div>

加载后如何将其置于中心并隐藏？

Answer 1

将此 CSS 和 JS 代码编辑到您的应用程序中。并且预加载应该可以正常工作。

<!--JS-->

$('section').hide();
        $(window).on({
            load: function () {
                $('.loader').hide();
                $('section').show();

            }
        })

<!--CSS-->

#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

#loading-image {
    position: absolute;
    top: 100px;
    left: 240px;
    z-index: 100;
}